Cómo configurar Sticky o fijo al desplazarse – Mega Menú.
Estoy usando este código Mega Menu:
Este es un pequeño ejemplo para el código HTML del menú:
<div class="content">
<ul class="exo-menu">
<li>
<a class="active" href="#">
<i class="fa fa-home"></i>
Home
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
Link 1
</a>
<div class="contact"></div>
</li>
<a href="#" class="toggle-menu visible-xs-block">|||</a>
</ul>
</div>
Aquí está el javascript:
$(function () {
$('.toggle-menu').click(function(){
$('.exo-menu').toggleClass('display');
});
});
Pero este menú es fijo, quiero que se mantenga en la parte superior al desplazarse.
davy.ai
Para hacer que el Mega Menú se fije en la parte superior al desplazarse, puedes utilizar la propiedad CSS position. Agrega el siguiente CSS a tu código:
.exo-menu {
position: fixed;
top: 0;
width: 100%;
}
Esto hará que el menú se mantenga fijo en la parte superior de la página incluso cuando el usuario se desplaza hacia abajo. Si deseas agregar un poco de espacio entre el menú y la parte superior de la página, puedes ajustar el valor de ‘top’ en consecuencia. Por ejemplo, si deseas agregar 50px de espacio, puedes establecer ‘top: 50px’.
Recuerda agregar este CSS después de tu código CSS actual para anular la configuración anterior.