Menu flotante con el tema Divi
Hoy os traigo un código CSS, para poner el menu del tema divi en la parte inferior cuando el usuario esté en la versión móvil. Facilitando la navegación entre páginas.
UX Móvil: ventaja de tener el menu en la parte inferior.
Este menú estilo hamburguesa ( su nombre es porque esta representado por tres rayas horizontales, y de ahí su nombre por la similitud con una hamburguesa), situado en la parte inferior derecha tiene una ventaja de navegación, porque el usuario puede pulsarlo fácilmente con sólo mover un poco el dedo y tener acceso a las demás opciones. Esto ayuda que el porcentaje de rebotede una página se reduzca.
Bueno este es el código css que tienes que añadir para el tema Divi de wordpress:
#et_top_search {
height:50px
}
@media screen and (max-width:500px) {
#et_mobile_nav_menu {
position:fixed;
bottom:15px;
right:15px;
background-color:#fff;
box-shadow:0 0 15px #a7a7a7;
padding:8px;
border-radius:50%;
z-index: 99;
}
.et_header_style_left #et-top-navigation .mobile_menu_bar {
padding-bottom: 0px!important;
}
.mobile_menu_bar.mobile_menu_bar_toggle {
padding:0
}
.mobile_nav.opened #mobile_menu {
position:fixed;
top:20%;
border:3px solid #E02B20;
width:80%;
left:0;
right:0;
margin-left:auto;
margin-right:auto
}
.mobile_nav.opened #mobile_menu a {
border:none;
text-align:center;
}
}Este código sólo afecta a los dispositivos móviles.
Deberá de acceder a la sección de DIVI (theme) > css personalizado (situado en la parte inferior).
