Menú móvil

Archivo primary.php del tema:

<button class="screen-reader-text"><?php echo hybrid_get_menu_name( 'primary' ); ?></button>

Luego resulta que en el archivo jetpack.css del plugin JetPack hay un estilo llamado «screen-reader-text» cuyas propiedades se aplican al «button» con la consecuencia que deja de verse.

Esa era mi segunda opción. La primera era averiguar porque el estilo de un plugin se aplica a un estilo del tema. Tal vez sea por las características particulares de «screen-reader-text».

Voy a añadir en la hoja de estilos esa propiedades que son precisamente las que impiden que se vea el menú.

.screen-reader-text {
	clip: inherit;
	clip-path: none;
	height: auto;
	overflow: inherit;
	width: auto;
	position: absolute !important;
}

Con esto funciona salvo por la «position». Ponga el valor que ponga, no queda bien.

Creo que directamente voy a quitar lo de

class="screen-reader-text"

en

<button class="screen-reader-text"><?php echo hybrid_get_menu_name( 'primary' ); ?></button>

No parece que quede afectado por quitarle ese estilo.

• Esta respuesta fue modificada hace 5 años, 9 meses por almendron.

Funciona poniendo en el CSS adicional

.menu-toggle button {
	position: relative !important;
}
.screen-reader-text {
	clip: inherit !important;
	clip-path: none !important;
	height: auto !important;
	overflow: inherit !important;
	width: auto!important;
}

Pero esto supongo que afectará a todo y no me gusta la idea de ponerlo allí. Voy a probar a modificar la hoja de estilos del tema. A ver si sigue funcionando.