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>