Crear un botón flotante para el menú de nuestro WordPress
En este artículo veremos cómo podemos crear un botón flotante para el menú de navegación, en versión teléfono, de nuestra página web hecha con WordPress.
La idea es crear un botón circular en la parte inferior derecha, que al pulsarlo, se despliega el menú de navegación de nuestra página web.
¡Vamos a ello!.
Código que vamos a utilizar
Para este ejemplo utilizaremos un código un poquito extenso, pero sencillo de comprender y de modificar.
El código que vamos a utilizar es el siguiente:
@media only screen and (max-width: 600px) {
button#js-subheader-menu-opener {
position: fixed;
top: auto!important;
bottom: 90px!important;
right: 30px;
height: auto;
background: white;
border-radius: 50%;
box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 50%);
width: 50px;
padding: 12px;
z-index: 999999;
}
.subheader-opened .top-bar {
z-index: 9999;
background: none;
border-top: none;
}
.subheader-opened .logo-container,
.subheader-opened .right {
display: none;
}
.subheader-opened #js-subheader {
position: fixed;
top: 0;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
}
}
Como puedes ver, el código es un poco extenso, pero fácil de entender. Vamos a explicar cómo funciona.
- Establecemos el ancho máximo en el que se mostrará el menú, por encima de esta cifra de píxeles no se mostrará.
- Establecemos una posición del botón, el color de fondo, el radio de esquina, la sombra del botón y el tamaño. Si quieres cambiar su posición puedes modificar estos valores.
- Le decimos que cuando se abra se mostrará el menú de navegación y el logotipo y el tamaño (en realidad la posición superior e inferior) del menú desplegado, y además, le decimos que el desbordamiento (el desplazamiento del contenido del menú).
- Verticalmente tendrá un scroll (para poder desplazar el contenido y poder ver todas las opciones), y el desplazamiento horizontal lo escondemos para que no haya desplazamiento horizontal del contenido.
Dónde podemos colocar este código
Como es un código CSS, podemos ponerlo directamente en nuestro personalizador. Para hacerlo debes ir a Apariencia, Personalizar, CSS adicional.
