1

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>

3
  • Tal vez sea porque el logo, la imágen es muy largo y ocupa mucho espacio. Entonces, el siguiente objeto, se acomoda abajo el 18 ene. a las 12:45
  • 2
    La palabra "BODAS" se mueve porque en el css tienes position: absolute; y top: 50%;, por lo que cuando el menú se despliega y la altura cambia entonces "BODAS" se posiciona al 50% de la parte superior. el 18 ene. a las 13:14
  • Ya pero en ese caso también se debería mover la imagen y no lo hace
    – Mar
    el 18 ene. a las 14:35

1 respuesta 1

0

Lo que te está ocurriendo es lo que dice el compañero @HeytalePazguato. El elemento .navbar-brand-problem lo tienes posicionado de manera absoluta respecto al elemento .container, al estar posicionado con un top: 50%, si el ancestro de referencia crece de altura (el ancestro de referencia para un elemento posicionado en absoluto es el primero que encuentre que esté posicionado en relativo) entonces ese 50% le hará seguir estando en el centro, ocurriendo que su posición se vea afectada.

Una solución sería darle al elemento .navbar-brand-problem un top fijo. De esta manera evitas el desplazamiento de cuando se despliega el menú.

@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: 19px;
  -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>

1
  • Ha funcionado perfectamente, muchas gracias.
    – Mar
    el 18 ene. a las 17:44

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.