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
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;
}
Saludos puedes decirme co. O puedo hacer que el menú hamburguesa pueda bajarlo hasta el centro, o más abajo y que esté fijo cuando el usuario se desplaze.
Hola de nuevo. Como te dije en la pregunta anterior debes de configurar las propiedades CSS hasta llegar al resultado que necesites. Para que se quede fijo utilizamos la propiedad «position:fixed» y una vez aplicada esta podemos poner el elemento donde queramos con las propiedades «top» «right» «bottom» y «left», estas propiedades aceptan pixeles, porcentajes,.. y la que más me gusta para esta caso es «vh» que responde a unidades de pantalla. Puedes buscar páginas donde te explican detalladamente estas propiedades CSS.
Saludos.
pero para ponerlo en el lado derecho abajo eso es lo que quiero porque ningún plugin no funciona, entonces hay algun codigo para ponerlo al lado derecho y un poco alto del footer en el móvil
Hola Ricardo, para ponerlo donde quieras tienes que jugar con las reglas CSS «bottom» y «right» que explico en el post, si lo quisieras más a la derecha debedrías poner «right: 20px» por ejemplo, eso lo pondría a 20px del límite derecho de la pantalla. Ves probando hasta que consigas la posición que necesitas.
Saludos