Cómo crear el menú móvil flotante con CSS

¡Buenos días! En este vídeo os enseño a diseñar el menú móvil que se queda fijo en la esquina inferior derecha de la pantalla móvil, al estilo de Google 🙂 ¡Vamos allá!

A continuación os comparto el código CSS que he utilizado en el vídeo.

Divi

#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
}

.mobile_menu_bar.mobile_menu_bar_toggle {
padding:0
}

.mobile_nav.opened #mobile_menu {
position:fixed;
top:30%;
border:3px solid #2ea3f2;
width:80%;
left:0;
right:0;
margin-left:auto;
margin-right:auto
}

.mobile_nav.opened #mobile_menu a {
border:none;
text-align:center;
}
}

Genesis

@media screen and (max-width:500px) {
#genesis-mobile-nav-primary {
position:fixed;
bottom:15px;
right:15px;
background-color:#f3f3f3;
padding:8px;
height:60px;
width:60px;
border-radius:50%;
z-index: 99
}

.site-header .menu-toggle::before {
display:none;

}

#genesis-nav-primary {
position:fixed;
width:100%;
top:30%;
left:0;
background-color:#f3f3f3;
text-align:center;
padding:30px 0
}
}

Generate Press

@media screen and (max-width:500px) {
#site-navigation .menu-toggle {
position:fixed;
line-height: unset;
bottom:15px;
right:15px;
border-radius:50%;
width:50px;
height:auto;
padding:15px;
background-color:#fff;
box-shadow: 0 4px 20px #9e9d9d;
z-index: 99
}

.menu-toggle .mobile-menu {
display:none
}

#site-navigation.toggled {
border-radius:unset
}
}

Si sois como yo y os gusta crear o modificar cosas con HTML y CSS (y no utilizar plugins) también os recomiendo echarle un vistazo a los siguientes vídeos 🙂