---
title: "Zerif Lite: ¿Cómo mostrar siempre el icono “hamburguesa” para el menú?"
url: https://caribdis.net/2016/02/07/zerif-lite-como-mostrar-siempre-el-icono-hamburguesa-para-el-menu/
date: 2016-02-07
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "Continuando con la serie de tutoriales para el tema Zerif Lite de ThemeIsle, en este décimo capítulo aprenderemos a transformar el menú estándar en un icono que al hacerle clic..."
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: 418
---

# Zerif Lite: ¿Cómo mostrar siempre el icono “hamburguesa” para el menú?

Continuando con la serie de tutoriales para el tema **Zerif Lite** de [**ThemeIsle**](https://caribdis.link/ThemeIsle), en este décimo capítulo aprenderemos a transformar el menú estándar en un icono que al hacerle clic desplegará los enlaces.

El icono hamburguesa es un símbolo que consiste en tres líneas horizontales paralelas (≡) y que ha ganado gran difusión en los últimos años gracias a los dispositivos móviles. Pero lejos de ser algo “moderno”, este icono data de los comienzos de la era de la computación personal basada en interfaces gráficas, ya que fue diseñado para la [Xerox Star](https://es.wikipedia.org/wiki/Xerox_Star), allá por los albores de la década del 80.

Con frecuencia está ubicado en el extremo superior izquierdo o derecho de las páginas, y se le ha dado ese mote por su supuesta semejanza a un sándwich de hamburguesa. Al hacer clic en este icono se despliega un menú de páginas o de opciones, optimizando el espacio reducido de las pantallas de los dispositivos móviles.

Con meros propósitos estéticos, puede que queramos mantener ocultos los elementos del menú y simplemente mostrar ese icono para animar al usuario a que interactúe.

![Menú estándar de Zerif Lite](//caribdis.net/wp-content/uploads/2016/02/Zerif-Menu1.jpg)

Para mostrar siempre el icono hamburguesa en **Zerif Lite**, tendremos que agregar código CSS en la hoja de estilos del tema hijo. Las instrucciones para crear un tema hijo 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 el archivo `custom.css` del tema hijo agregamos lo siguiente:
@media (min-width: 320px) {
 .navbar-header {
    float: none;
 }
 .navbar-left,.navbar-right {
    float: none !important;
 }
 .navbar-toggle {
    display: block;
 }
 .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
 }
 .navbar-collapse.collapse {
    display: none!important;
 }
 .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
 }
 .navbar-nav>li {
    float: none;
 }
 .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
 }
 .collapse.in{
    display:block !important;
 }

 .navbar-inverse .navbar-nav {
    padding-left: 10px;
    line-height: normal;
    text-align: center;
 }
 .navbar-inverse .navbar-nav>li {
    display: inline-block;
    margin-bottom: 0;
 }
 .navbar-inverse .navbar-nav > li {
    width: 100%;
    border-bottom: 1px solid #EDEDED;
    position: relative;
    margin: 8px 0 0 0;
    padding: 0 0 8px 0;
 }
 .navbar-inverse .navbar-nav > li  a {
    text-align: left;
 }
 .navbar-inverse .navbar-nav ul.sub-menu {
    display: none !important;
    position: relative;
    top: 0;
    box-shadow: none;
    width: 100%;
 }
 .navbar-inverse .navbar-nav li.this-open > ul {
    display: block !important;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li {
    width: 100%;
    float: left;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li a {
    width: 100%;
    float: left;
    padding: 8px 25px 8px 0;
    border-bottom: 1px solid #EDEDED;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li:last-child a {
    border-bottom: none;
 }
 .navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu {
    position: relative;
    left: 0;
    top: 0;
 }
 #main-nav {
    overflow: visible;
 }
 #main-nav, #main-nav.fixed {
    position: relative;
 }
 .navbar-collapse {
    max-height: 100%;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li {
    padding-left: 20px;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li {
    padding-bottom: 0;
    padding-top: 0;
 }
 .dropdownmenu {
    display: block;
    position: absolute;
    z-index: 9;
    right: 0;
    top: 5px;
    width: 25px;
    height: 25px;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    background: url(images/menu-icon.png) center center no-repeat #e96656;
 }
 .navbar-inverse .navbar-nav ul.sub-menu li{
    margin-right: 0;
    padding-right: 0;
 }
 .navbar-inverse .navbar-nav > li > a:hover {
    color: #404040 !important;
 }
 .this-open > a {
    color: #e96656 !important;
 }
 ul.nav > li.current_page_item > a:before {
    content: "";
    left: 0px;
    width: 50px;
 }
 #site-navigation {
    width: 100%;
 }
 .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    float: left !important;
 }
 #main-nav {
    overflow: hidden !important;
 }
}
El resultado es el siguiente:

![Icono hamburguesa en Zerif Lite](//i.imgur.com/6gnOm55.gif)

En el caso de que haya añadido el código mediante la opción *CSS adicional* (más info sobre esta nueva característica de WordPress [en esta entrada](https://caribdis.net/2015/12/02/zerif-lite-como-eliminar-la-opacidad-del-fondo/)), recuerde usar la ruta completa a la imagen del icono en la clase `.dropdownmenu`: `background: url(https://su-sitio-wordpress.com/wp-content/themes/zerif-lite/images/menu-icon.png) center center no-repeat #e96656;`

**Tutorial original en inglés: [How to show hamburger menu starting from 1024px in Zerif](http://docs.themeisle.com/article/37-show-hamburger-starting-from-1024px)**