0

estoy empezando a aprender a programar por el momento solo estoy con HTML y CSS. Ya llevo 1 mes aprendiendo y tengo una duda con Boostrap.

Yo tengo mi Navbar en el cual yo quiero mantener MI estructura, pero quiero que cuando sea responsive y cambie de resolucion ya sea para mobile o tablet, quiero que aparezca un "menu hamburguesa" el cual en Boostrap la unica solucion es usar un diseño de Navbar que tienen ellos.
¿Alguno tiene idea como puedo hacer SOLO EL menu hamburguesa con Boostrap?

Aca les dejo el codigo HTML y CSS (Hay 3 iconos que no se van a ver porque son de ionic.io). Lo que busco es que quede la imagen y el catalogo, y que el menu hamburguesa se coma todo lo otro.

.header {
    height: 70px;
    width: 100%;
    background-color: #e090a5;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}

.logo {
    height: 70px;
    width: 230px;
}

ul {
    list-style: none;
}

li {
    display: inline;
}

a {
    text-decoration: none;
    font-family: Poppins;
}

.btn {
    padding: 6px;
    background-color: #fff;
    border: 1px solid black;
}

.nav {
    display: flex;

}

.contenedor-nav {
    width: 1510px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-bar-izq {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-bar-izq li a {
    color: #000;
}

.nav-var-der {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-var-der li a {
    color: #000;
}

.contacto:hover {
    color: white;
    text-decoration: underline;
}

.pagos-y-envios:hover {
    color: white;
    text-decoration: underline;
}
<header class="header">
        <nav class="nav">
            <figure>
                <a href="./index.html" class="logo-link"><img src="./img/logo.png" alt="logo" class="logo"></a>
            </figure>
            <div class="contenedor-nav">
                <div class="secciones-izq">
                    <ul class="nav-bar-izq">
                        <li><a href="./html/catalogo.html" class="btn">Catálogo</a></li>
                        <li><a href="./html/contactanos.html" class="contacto">Contactanos</a></li>
                        <li><a href="./html/pagos-y-envios.html" class="pagos-y-envios">Pagos y envios</a></li>
                    </ul>
                </div>
                <div class="secciones-der"></div>
                <ul class="nav-var-der">
                    <li><a href="#" class="buscar"><ion-icon name="search-outline" size="large"></ion-icon></a></li>
                    <li><a href="#" class="carrito"><ion-icon name="cart-outline" size="large"></ion-icon></a></li>
                    <li><a href="./html/perfil.html" class="perfil"><ion-icon name="person-outline"
                                size="large"></ion-icon></a></li>
                </ul>
            </div>
        </nav>
    </header>

3
  • 2
    ... Debe haber alguno que si, pero porque no nos enseñas tu codigo para indicarte el problema y como solucionarlo.
    – DABL03
    Commented el 5 abr. 2023 a las 20:59
  • 1
    Bienvenido a stack overflow en español. Aprobechando que eres nuevo te invito las siguientes lecturas: El recorrido (de paso ganas una medalla). Tambien ¿Como elaboro una buena pregunta?
    – DABL03
    Commented el 5 abr. 2023 a las 21:01
  • 1
    ¿Qué versión de Bootstrap estás usando?... En internet hay muchos ejemplos Commented el 5 abr. 2023 a las 22:19

1 respuesta 1

0

Puedes usar las clases de bootstrap d-none y d-block (que en CSS es equivalente a display: none y display: block) para ocultar y mostrar el menu.

Bootstrap 5 usa el mobile first design aproach lo que significa que los estilos se aplican primero a los dispositivos móviles y luego, con los media queries y min-width se van ajustando a pantalla más grandes.

Ejemplo:

Esto se aplica de 0px a 600px.

body {
  background: red;
}

Esto se aplica a partir de 600px en adelante.

@media (min-width: 600px) {
  body {
    background: green;
  }
}

Entonces, si aplica la clase d-none y d-lg-block a tu header, se ocultará y cuando llegue a lg se mostrará.

<header class="header d-none d-lg-block">
 ...
</header>

Lo mismo si quieres que el icono del menú hamburguesa aparezca solo en móvil y tablet. Aplica las clases: d-block y d-lg-none

<div class="d-block d-lg-none">
   <ion-icon name="menu-outline"></ion-icon>
</div>

Puedes encontrar más información de cómo ocultar elementos (Hiding elements) en Bootstrap 5 y Diseño móvil primero vs escritorio primero (Mobile first vs Desktop first)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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