Cómo crear un botón de menú flotante

Para que el botón de apertura del menú quede fijado abajo a la derecha en dispositivos móviles, tienes que añadir alguno de estos dos códigos en el apartado Apariencia -> CSS personalizado:

Si NO usas la opción de “Volver al inicio”

@media only screen and (max-width: 600px) {
	button#js-subheader-menu-opener {
		position: fixed;
		top: auto!important;
		bottom: 30px!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;
	}
}

Si usas la opción de “Volver al inicio”

@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;
	}
}

Resultado

Este tipo apertura de menú lo popularizó el menú de Orbital Theme, y ahora lo podemos conseguir facilmente con CSS para lograr este resultado:

Menú cerrado
Menú abierto

Ajustes

Puedes cambiar 600px por el ancho máximo en el que quieras ver el botón flotante.

También puedes cambiar el margen derecho cambiando el valor de right: 30px;

El ancho y alto del botón se ajusta cambiando el valor width: 50px;

Cambiando el background: #ffffff; cambiarías el color de fondo del botón.

Para cambiar el color del icono, tendrías que añadir la siguiente regla (cambiando #000000 por el color deseado):

button#js-subheader-menu-opener svg.main-color * {
	fill: #000000;
}


Otro tipo de contenido en el blog de Wasabi