Cómo diseñar los menús de navegación de WordPress

¿Desea diseñar sus menús de navegación de WordPress para cambiar sus colores o apariencia? Si bien su tema de WordPress maneja la apariencia de sus menús de navegación, puede personalizarlo fácilmente usando CSS para cumplir con sus requisitos. En este artículo, le mostraremos cómo diseñar los menús de navegación de WordPress en su sitio.

Diseño de menús de navegación en WordPress

Mostraremos dos métodos diferentes. El primer método es para principiantes porque usa un complemento y no requiere ningún conocimiento de código. El segundo método es para usuarios intermedios de bricolaje que prefieren usar código CSS en lugar de un complemento.

Método 1: diseñar menús de navegación de WordPress usando un complemento

Su tema de WordPress usa CSS para diseñar menús de navegación. Muchos principiantes no se sienten cómodos editando archivos de temas o escribiendo código CSS por su cuenta.

Es entonces cuando un complemento de estilo de WordPress es útil. Le ahorra editar archivos de temas o escribir cualquier código.

Lo primero que debes hacer es instalar y activar el complemento CSS Hero. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

CSS Hero es un complemento premium de WordPress que te permite diseñar tu propio tema de WordPress sin escribir una sola línea de código (no se requiere HTML ni CSS). Vea nuestra revisión de CSS Hero para obtener más información.

Los usuarios de WPBeginner pueden usar este cupón CSS Hero para obtener un 34% de descuento en su compra.

Tras la activación, se le redirigirá para obtener su clave de licencia de CSS Hero. Simplemente siga las instrucciones en pantalla y será redirigido a su sitio en unos pocos clics.

A continuación, debe hacer clic en el botón CSS Hero en la barra de herramientas de administración de WordPress.

Lanzar CSS Hero

CSS Hero ofrece un editor WYSIWYG (lo que ves es lo que obtienes). Al hacer clic en el botón, accederá a su sitio web con una barra de herramientas flotante CSS Hero visible en la pantalla.

Barra de herramientas de CSS Hero

Debe hacer clic en el icono azul en la parte superior para comenzar a editar.

Después de hacer clic en el icono azul, lleve el mouse a su menú de navegación y CSS Hero lo resaltará mostrando los bordes a su alrededor. Cuando hace clic en el menú de navegación resaltado, le mostrará los elementos que puede editar.

Apunte y haga clic para personalizar el menú

En la captura de pantalla anterior, nos muestra el contenedor del menú de navegación superior. Supongamos que queremos cambiar el color de fondo de nuestro menú de navegación. En ese caso, seleccionaremos la navegación superior que afecta a todo nuestro menú.

CSS Hero ahora le mostrará diferentes propiedades que puede editar como texto, fondo, borde, márgenes, relleno, etc.

Propiedades CSS

Puede hacer clic en cualquier propiedad que desee cambiar. CSS Hero te mostrará una interfaz simple donde puedes hacer tus cambios.

Cambiar la apariencia de un elemento

En la captura de pantalla anterior, seleccionamos el fondo y nos mostró una interfaz agradable para seleccionar el color de fondo, el degradado, la imagen y más.

A medida que realice cambios, podrá verlos en vivo en la vista previa del tema.

Vista previa en vivo de sus cambios de CSS

Una vez que esté satisfecho con los cambios, haga clic en el botón Guardar en la barra de herramientas de CSS Hero para guardar los cambios.

Lo mejor de usar este método es que puede deshacer fácilmente cualquier cambio que realice. CSS Hero mantiene un historial completo de todos sus cambios, y puede ir y venir entre esos cambios.

Método 2: diseñar manualmente los menús de navegación de WordPress

Este método requiere que agregue manualmente CSS personalizado y está destinado a usuarios intermedios.

Los menús de navegación de WordPress se muestran en una lista desordenada (lista con viñetas).

Por lo general, si usa la etiqueta de menú predeterminada de WordPress, mostrará una lista sin clases de CSS asociadas.


Su lista desordenada tendría el nombre de clase “menú” con cada elemento de la lista que tiene su propia clase CSS.

Esto podría funcionar si solo tiene una ubicación de menú. Sin embargo, la mayoría de los temas tienen múltiples ubicaciones donde puede mostrar menús de navegación.

Usar solo la clase CSS predeterminada puede causar conflictos con los menús en otras ubicaciones.

Es por eso que necesita definir la clase de CSS y la ubicación del menú también. Lo más probable es que su tema de WordPress ya lo esté haciendo al agregar los menús de navegación usando un código como este:

 'primary',
        'menu_class'     => 'primary-menu',
         ) );
?>

Este código le dice a WordPress que aquí es donde el tema muestra el menú principal. También agrega un menú primario de clase CSS al menú de navegación.

Ahora puede diseñar su menú de navegación utilizando esta estructura CSS.

// container class
#header .primary-menu{} 

// container class first unordered list
#header .primary-menu ul {} 

//unordered list within an unordered list
#header .primary-menu ul ul {} 

 // each navigation item
#header .primary-menu li {}

// each navigation item anchor
#header .primary-menu li a {} 

// unordered list if there is drop down items
#header .primary-menu li ul {} 

// each drop down navigation item
#header .primary-menu li li {} 

// each drap down navigation item anchor
#header .primary-menu li li a {} 

Deberá reemplazar #header con la clase CSS del contenedor utilizada por su menú de navegación.

Esta estructura lo ayudará a cambiar completamente la apariencia de su menú de navegación.

Sin embargo, hay otras clases CSS generadas por WordPress que se agregan automáticamente a cada menú y elemento de menú. Estas clases le permiten personalizar aún más su menú de navegación.

// Class for Current Page
.current_page_item{} 

// Class for Current Category
.current-cat{} 

// Class for any other current Menu Item
.current-menu-item{} 

// Class for a Category
.menu-item-type-taxonomy{}
 
// Class for Post types
.menu-item-type-post_type{} 

// Class for any custom links
.menu-item-type-custom{} 

// Class for the home Link
.menu-item-home{} 

WordPress también le permite agregar sus propias clases CSS personalizadas a elementos de menú individuales.

Puede usar esta función para diseñar elementos de menú, como agregar iconos de imagen con sus menús o simplemente cambiando los colores para resaltar un elemento de menú.

Dirigirse a Apariencia »Menús página en su administrador de WordPress y haga clic en el botón Opciones de pantalla.

Habilitar la opción de clases CSS para elementos de menú individuales

Una vez que haya marcado esa casilla, verá que se agrega un campo adicional cuando vaya a editar cada elemento de menú individual.

Agregar una clase CSS personalizada a un elemento de menú en WordPress

Ahora puede usar esta clase CSS en su hoja de estilo para agregar su CSS personalizado. Solo afectará el elemento del menú con la clase CSS que agregó.

Ejemplos de estilos de menús de navegación en WordPress

Los diferentes temas de WordPress pueden usar diferentes opciones de estilo, clases CSS e incluso JavaScript para crear menús de navegación. Esto le ofrece muchas opciones para cambiar esos estilos y personalizar sus menús de navegación para satisfacer sus propios requisitos.

La herramienta de inspección en su navegador web será su mejor amigo cuando se trata de averiguar qué clases de CSS cambiar. Si no lo ha usado antes, eche un vistazo a nuestra guía sobre cómo usar la herramienta de inspección para personalizar los temas de WordPress.

Básicamente, solo necesita apuntar el cursor al elemento que desea modificar, hacer clic con el botón derecho y luego seleccionar Inspeccionar herramienta en el menú del navegador.

Usando la herramienta de inspección para buscar clases de CSS para modificar

Dicho esto, echemos un vistazo a algunos ejemplos de la vida real de estilos de menús de navegación en WordPress.

1. Cómo cambiar el color de fuente en los menús de navegación de WordPress

Aquí está el ejemplo de CSS personalizado que puede agregar a su tema para cambiar el color de fuente de los menús de navegación.

#top-menu  li.menu-item a {
color:#ff0000;
} 

En este ejemplo, el menú superior # es la ID asignada a la lista desordenada que muestra nuestro menú de navegación. Tendrá que usar la herramienta de inspección para encontrar la ID utilizada por su tema.

Cambiar el color de fuente de los menús de navegación de WordPress

2. Cómo cambiar el color de fondo de la barra de menú de navegación

Primero, deberá encontrar el ID de CSS o la clase utilizada por su tema para el contenedor que rodea el menú de navegación.

Encontrar la clase CSS para el contenedor del menú de navegación

Después de eso, puede usar el siguiente CSS personalizado para cambiar el color de fondo de la barra del menú de navegación.

.navigation-top { 
background-color:#000; 
}

Así es como se veía en nuestro sitio web de demostración.

Cambiar el color de fondo de la barra del menú de navegación

3. Cómo cambiar el color de fondo de un solo elemento del menú

Es posible que haya notado que muchos sitios web usan un color de fondo diferente para los enlaces más importantes en su menú de navegación. Este enlace podría ser un botón de inicio de sesión, registro, contacto o compra. Al darle un color diferente, hace que el enlace sea más notable.

Para lograr esto, agregaremos una clase CSS personalizada al elemento del menú que queremos resaltar con un color de fondo diferente.

Dirigirse a Apariencia »Menús y haga clic en el botón Opciones de pantalla en la esquina superior derecha de la pantalla. Aparecerá un menú desplegable donde deberá marcar la casilla junto a la opción “Clases CSS”.

Habilitar la opción de clases CSS para elementos de menú individuales

Después de eso, debe desplazarse hacia abajo hasta el elemento del menú que desea modificar y hacer clic para expandirlo. Notará una nueva opción para agregar su clase CSS personalizada.

Agregar clase css personalizada a un elemento del menú

Ahora puede usar esta clase CSS para diseñar ese elemento de menú en particular de manera diferente.

.contact-us { 
background-color: #ff0099;
border-radius:5px;
}

Así es como se veía en nuestro sitio de prueba.

Cambiar el color de fondo de un único elemento de menú en los menús de navegación de WordPress

4. Agregar efectos de desplazamiento a los menús de navegación de WordPress

¿Desea que los elementos de su menú cambien de color al pasar el mouse? Este truco CSS particular hace que sus menús de navegación se vean más interactivos.

Simplemente agregue el siguiente CSS personalizado a su tema.

#top-menu  li.menu-item a:hover {
background-color:#fff;
color:#666;
border-radius:5px;
} 

En este ejemplo, # top-menu es la ID de CSS utilizada por su tema para la lista de menú de navegación desordenada.

Así es como se veía esto en nuestro sitio de prueba.

Efecto del mouseover en los menús de navegación de WordPress

5. Crear menús de navegación flotantes fijos en WordPress

Normalmente, los menús de navegación aparecen en la parte superior y desaparecen a medida que el usuario se desplaza hacia abajo. Los menús de navegación flotantes permanecen en la parte superior a medida que el usuario se desplaza hacia abajo.

Puede agregar el siguiente código CSS a su tema para que sus menús de navegación sean fijos.

#top-menu {
    background:#2194af;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: right;
    padding-right:30px
}

Simplemente reemplace # top-menu con la ID de CSS de su menú de navegación.

Así es como se veía en nuestra demostración:

Menú de navegación fijo

Para obtener instrucciones más detalladas y un método alternativo, consulte nuestra guía sobre cómo crear un menú de navegación flotante en WordPress.

6. Crear menús de navegación transparentes en WordPress

Muchos sitios web utilizan imágenes de fondo de pantalla grande o completa con sus botones de llamada a la acción. El uso de menús transparentes hace que su navegación se mezcle con la imagen. Esto hace que los usuarios tengan más probabilidades de centrarse en su llamado a la acción.

Simplemente agregue el siguiente CSS de muestra a su tema para que sus menús de navegación sean transparentes.

#site-navigation { 
background-color:transparent; 
}

Así es como se veía en nuestro sitio de demostración.

Menús de navegación transparentes en WordPress

Dependiendo de su tema, es posible que deba ajustar la posición de la imagen del encabezado para que cubra el área detrás de sus menús transparentes.

Esperamos que este artículo te haya ayudado a aprender cómo diseñar los menús de navegación de WordPress. También puede consultar nuestra guía sobre cómo agregar un menú de WordPress receptivo listo para dispositivos móviles.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.