Botón flotante para el menú de navegación

Tiempo estimado de lectura: 3 minutos

 

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.

  1. Establecemos el ancho máximo en el que se mostrará el menú, por encima de esta cifra de píxeles no se mostrará.
  2. 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.
  3. 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ú).
  4. 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.

 


¿Te ha servido este artículo?, PUES GIVE ME FIVE. 0


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *