---
title: "Zerif Lite: ¿Cómo desactivar el icono “hamburguesa” para el menú en dispositivos móviles?"
url: https://caribdis.net/2016/04/03/zerif-lite-desactivar-icono-hamburguesa-menu-dispositivos-moviles/
date: 2016-04-03
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "En el tutorial número catorce dedicado al tema gratuito Zerif Lite, de ThemeIsle, veremos cómo desactivar el menú para móviles en las resoluciones de pantalla correspondientes. Si bien el icono..."
categories:
  - "Zerif Lite"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "traducción"
  - "tutorial"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 238
---

# Zerif Lite: ¿Cómo desactivar el icono “hamburguesa” para el menú en dispositivos móviles?

En el tutorial número catorce dedicado al tema gratuito **Zerif Lite**, de **[ThemeIsle](https://caribdis.link/ThemeIsle)**, veremos cómo desactivar el menú para móviles en las resoluciones de pantalla correspondientes. Si bien el icono “hamburguesa” es universalmente reconocido hoy en día, puede darse el caso de que no lo necesitemos, si es que no tenemos muchos elementos en el menú.

[![Zerif Lite - Menú con pocos enlaces](//caribdis.net/wp-content/uploads/2016/04/Zerif-menu-items-1024x600.jpg)](https://caribdis.net/wp-content/uploads/2016/04/Zerif-menu-items.jpg)Un menú de Zerif Lite con pocos enlaces

Con las siguientes instrucciones, desactivaremos este componente y mostraremos solo las etiquetas, como en el menú convencional. Como siempre, es recomendable trabajar con un tema hijo: las instrucciones para crearlo se encuentran [en esta entrada anterior](https://caribdis.net/2017/05/07/zerif-lite-agregar-una-seccion-tutorial-actualizado-para-la-version-de-wp-org/).

En caso de que solo hagamos ediciones de estilo **no es necesario el tema hijo**, sino que será suficiente añadir el código en el panel *CSS adicional* del *Personalizador*.

Ahora, en el archivo `custom.css` del tema hijo (o en el panel *CSS adicional* del* Personalizador*), pegue el siguiente código:
@media screen and (max-width: 768px) {

.navbar-toggle {
display:none !important;
}

nav.navbar-collapse {
display:block !important;
}

.responsive-logo {
float:left !important;
}

nav.navbar-collapse ul li {
width: auto !important;
margin-left: 10px !important;
border-bottom: none !important;
}

#site-navigation {
height: auto;
}

}
Veamos el resultado en una tablet:

![Zerif Lite - iPad](//caribdis.net/wp-content/uploads/2016/04/Zerif-menu-ipad.jpg)

Y en un teléfono móvil:

![Zerif Lite - iPhone](//caribdis.net/wp-content/uploads/2016/04/Zerif-menu-iphone.jpg)

¿Qué tal si queremos centrar el logo? Nada más tendremos que agregar el siguiente código:
@media screen and (max-width: 469px) {

.navbar-inverse .navbar-brand {
    float: none;
}

}
![Zerif Lite - iPhone - Logo centrado](//caribdis.net/wp-content/uploads/2016/04/Zerif-menu-iphone-logo.jpg)

**Tutorial original en inglés: [http://docs.themeisle.com/article/7-disable-hamburger-menu-zerif](http://docs.themeisle.com/article/7-disable-hamburger-menu-zerif)**