OceanWP Menu Orbital

Menú Orbital en oceanWP gratis

OceanWP en uno de mis themes favoritos, ya que en su versión FREE permite un grado importante de personalización, es compatible con Woocommerce y con mi editor visual favorito, Elementor.

Una característica que ha hecho que el theme Orbital destaque en cuanto a usabiidad móvil es que el típico menú hamburguesa nos aparece en el extremo inferior derecho, haciendo más fácil la navegación, al quedar el botón más cerca de nuestro dedo pulgar y de esta manera no hace falta que hagamos la cabecera «Sticky» o fija, dejándonos más espacio visible para el contenido

Si abrimos el explorador de código, nos encontraremos que la clase que controla el aspecto de el menú móvil es: body.default-breakpoint .oceanwp-mobile-menu-icon y está metida en una mediaquery que lo hace aparecer cuando la medida de la pantalla es menor de 959px

Encontrar La Clase Del Menu

Para tener el icono del menú en el lugar requerido, insertaremos el siguiente CSS desde el «Personalizador» > CSS adicional:

@media only screen and (max-width: 959px) {
body.default-breakpoint .oceanwp-mobile-menu-icon
{
display: block;
position: fixed;
bottom: 9vh;
right: 2vh;
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 5px #000;
}
}

.oceanwp-mobile-menu-icon a:first-child {
padding-left: 0;
position: relative;
bottom: 16px;
left: 18px;
}

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *