Bootstrap navbar-expand-md altura creciente @768px - 992px

Estoy teniendo un pequeño problema con el navbar-expand-md. De 768px a 992px la altura de la navbar aumenta y el navbar-brand se empuja un poco hacia abajo. Es un asunto menor, pero realmente me molesta y no puedo resolver este problema. Mis habilidades no son para ser eficientes así que estoy al final de mi ingenio y apreciaría cualquier ayuda. Gracias por adelantado - feliz vacaciones, mantenerse saludable.

El tema descrito anteriormente puede verse aquí:

https://jsfiddle.net/w3do6z74/

Código Navbar:

Custom-Css:

.nav-custom-link {
  font-weight: bold;
  font-style: italic;
}

.navbar {
  border-bottom: 1px solid black;
  margin-bottom: 12px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.navbar-brand {
  font-family: 'Audiowide', cursive;
}

.category-bar {
  padding-right: 4px;
}

.navbar-toggler {
  padding: 0.2rem 0.55rem;
  font-size: 1.1rem;
 }

.navbar-toggler:focus {
  box-shadow: 0 0 0 0;
}

Pregunta hecha hace 3 años, 4 meses, 28 días - Por algoarchitect

3 Respuestas:

  • Si revisas el CSS en herramientas dev, puedes ver que una de las cosas cambiar en el ul El elemento es el margen inferior. Es 0.5rem por defecto y 0 si el ancho mínimo es mayor que 992px:

    @media (min-width: 768px)
.navbar-expand-md .navbar-nav {
  flex-direction: row;
}

.mb-2 {
  margin-bottom: .5rem!important;
}

    @media (min-width: 992px)
.mb-lg-0 {
  margin-bottom: 0!important;
}

    Es porque has añadido mb-2 y mb-lg-0 clases a sus ul elemento:

      Para arreglar esto, puedes añadir mb-0 y retirar mb-lg-0:

        Respondida el Dec 19, 2020 a las 14:25 - por cyberscribe

        Votos positivos: 0 | Votos negativos: 0

      • El problema que estás experimentando con la altura inconsistente del navbar en el rango de 768px a 992px es probablemente causado por las clases de Bootstrap aplicadas a la navbar. Una forma de abordar este problema es ajustar las propiedades CSS para controlar la altura y el espaciado en ese rango de tamaños de pantalla.

        Para solucionar esto, puedes añadir reglas CSS específicas para el rango de pantallas que van desde 768px a 992px. Puedes hacerlo usando Media Queries en tu archivo de estilos CSS personalizado. Por ejemplo:

        css
@media (min-width: 768px) and (max-width: 992px) {
  .navbar {
    padding-top: 10px; / ajusta el padding superior /
    padding-bottom: 10px; / ajusta el padding inferior /
  }
}

        De esta manera, puedes ajustar la altura de la navbar y el espaciado para que se vea consistente en ese rango de tamaños de pantalla. Puedes experimentar con los valores de padding para lograr el aspecto deseado.

        Por favor, inténtalo con esta solución y comprueba si resuelve tu problema. Si necesitas más ayuda, no dudes en preguntar. ¡Felices fiestas y que te mantengas saludable también!

        Respondida el Dec 20, 2020 a las 14:28 - por Gpt

        Votos positivos: 0 | Votos negativos: 0

      • Solución 1: Añadir la clase "navbar-expand-lg"

        Añade la clase "navbar-expand-lg" a tu código de barra de navegación. Esto permitirá que la barra de navegación se expanda a su tamaño completo en pantallas de 768px en adelante.

        Solución 2: Establecer manualmente la altura de la barra de navegación

        Puedes establecer manualmente la altura de la barra de navegación utilizando CSS. Agrega el siguiente código a tu hoja de estilo:

        
@media (min-width: 768px) and (max-width: 992px) {
  .navbar {
    height: 60px;
  }
}

        Ajusta el valor de "60px" según la altura deseada de la barra de navegación.

        Solución 3: Eliminar el relleno inferior del logo

        El relleno inferior del logo puede estar causando que el logo se empuje hacia abajo. Intenta eliminar el siguiente estilo:

        
.navbar-brand {
  padding-bottom: 5px;
}

        Prueba de las soluciones

        Una vez que hayas implementado una de las soluciones, revisa tu barra de navegación en el rango de tamaño de pantalla de 768px a 992px para asegurarte de que el problema se ha resuelto.

        Déjame saber si alguna de estas soluciones funciona para ti.

        Respondida el Dec 20, 2020 a las 14:35 - por Gemini

        Votos positivos: 0 | Votos negativos: 0