Estoy haciendo un menu navbar. Funciona perfectamente salvo que cuando esta en modo pantalla móvil al abrir el menú, uno de los "a class="nav-brand"" la palabra "BODAS", se baja y no debería. ¿Alguien sabe por qué?
Cuando lo meto en la consola de stackoverflow me da error: { "message": "Uncaught Error: Bootstrap's JavaScript requires jQuery", "filename": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js", "lineno": 6, "colno": 31 }
Pero en mi ordenador no me da ese problema.
Gracias de antemano. Les dejo el código:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
html {
width: 100%;
height: 100%;
background: #ddd;
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
}
.navbar,
.navbar-dark {
background: rgba(255, 255, 255, 0.70)!important;
}
li.nav-item {
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
color: rgba(0, 0, 0, 0.6)!important;
}
li.nav-item a {
color: rgba(0, 0, 0, 0.6)!important
}
li.nav-item a:hover,
li.nav-item a:active,
li.nav-item a:focus {
font-weight: 400;
}
.mail {
display: inline-block!important;
border: 2px solid transparent!important;
width: 100%!important;
font-family: 'Montserrat', sans-serif!important;
font-weight: 700!important;
transition-duration: 0.3s!important;
transition-timing-function: ease-in-out!important;
background: #ffffff!important;
border-color: #ffffff!important;
color: black!important;
border-radius: 50px!important;
padding: 5px 23px 5px 23px!important;
font-size: 9px!important;
line-height: 0px!important;
margin-top: 7px!important;
text-align: center!important;
white-space: nowrap!important;
vertical-align: middle!important;
cursor: pointer!important;
user-select: none!important;
box-shadow: 0 0 4px rgb(0 0 0 / 40%)!important;
box-sizing: border-box!important;
}
.mail:hover {
background-color: transparent!important;
color: #555555!important;
}
.imgLogo {
height: 40px!important;
width: auto;
padding: 0px;
vertical-align: middle;
display: inline-block
}
a.navbar-brand-problem {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: #294f9a!important;
font-weight: 600;
}
a.navbar-brand-problem:hover,
a.navbar-brand-problem:active,
a.navbar-brand-problem:focus {
font-weight: 500;
}
@media (max-width: 767px) {
.navbar-toggleable-sm {
clear: both;
}
.imgLogo {
height: 30px!important;
width: auto;
padding: 0px;
}
}
@media (min-width: 768px) {
.navbar-problem {
margin: 0;
position: absolute;
right: 0;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<style>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</style>
<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
<div style="position: relative" class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#home"><img class="imgLogo" src="https://saturnalia-show.com/images/logo_saturnalia-show_horizontal_web.png" /></a><a class="navbar-brand-problem">BODAS</a>
</div>
<button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button">
☰
</button>
<div class="navbar-toggleable-sm collapse pull-md-right text-xs-center navbar-problem" id="collapsenav">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#comentarios">Opiniones</a></li>
<li class="nav-item"><a class="nav-link" href="#ideas">Ideas</a></li>
<li class="nav-item"><a class="nav-link" href="#packs">Packs</a></li>
<li class="nav-item"><a class="nav-link" href="#contacto">Presupuesto</a></li>
<li class="nav-item"><a class="nav-link mail" href="#contacto">info@saturnalia-show.com</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<!-- partial -->
</body>
</html>
css
tienesposition: absolute;
ytop: 50%;
, por lo que cuando el menú se despliega y la altura cambia entonces "BODAS" se posiciona al 50% de la parte superior.