Cómo Estilizar los Menús de Navegación de WordPress

¿Desea cambiar el estilo de sus menús de navegación de WordPress para cambiar sus colores o apariencia? Mientras su tema de WordPress maneja la apariencia de sus menús de navegación, usted puede fácilmente personalizarlo usando CSS para satisfacer sus necesidades. En este artículo, le mostraremos cómo cambiar el estilo de los menús de navegación de WordPress en su sitio.

Mostraremos dos métodos diferentes. El primer método es para principiantes porque utiliza un plugin y no requiere ningún conocimiento de código. El segundo método es para los usuarios de DIY intermedios que prefieren utilizar código CSS en lugar de un plugin.

Método 1: Estilo de los menús de navegación de WordPress usando un plugin

El tema de WordPress utiliza CSS para cambiar el estilo de los 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 plugin de estilo de WordPress resulta útil. Le ahorra la edición de archivos de tema o la escritura de cualquier código.

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

CSS Hero es un plugin 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 o CSS). Vea nuestra revisión de CSS Hero para obtener más información.

Los usuarios de AprenderWP pueden usar este cupón de héroe de CSS para obtener un descuento del 34% en su compra.

Tras la activación, se le redirigirá para que obtenga su clave de licencia de Héroe CSS. Simplemente siga las instrucciones en pantalla, y será redirigido de vuelta 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.

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

Necesitas hacer clic en el icono azul en la parte superior para empezar a editar.

Después de hacer clic en el icono azul, lleva el ratón al menú de navegación y CSS Hero lo resaltará mostrando los bordes que lo rodean. Cuando haga clic en el menú de navegación resaltado, le mostrará los elementos que puede editar.

En la captura de pantalla de arriba, 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 te mostrará diferentes propiedades que puedes editar como texto, fondo, borde, márgenes, relleno, etc.

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

En la captura de pantalla de arriba, seleccionamos el fondo, y nos mostró una buena interfaz para seleccionar el color de fondo, gradiente, imagen, y más.

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

Una vez que esté satisfecho con los cambios, haga clic en el botón de 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 haga. CSS Hero mantiene un historial completo de todos tus cambios, y puedes ir y venir entre ellos.

Método 2: Estilo manual de los menús de navegación de WordPress

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

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

Normalmente, si utiliza la etiqueta predeterminada del menú de WordPress, se mostrará una lista sin clases CSS asociadas a ella.

1

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

Esto puede funcionar si sólo tiene una ubicación de menú. Sin embargo, la mayoría de los temas tienen varias ubicaciones en las que puede mostrar menús de navegación.

El uso exclusivo de la clase CSS predeterminada puede causar conflictos con los menús de otras ubicaciones.

Por eso es necesario definir también la clase CSS y la ubicación del menú. Lo más probable es que tu tema de WordPress ya lo esté haciendo añadiendo los menús de navegación usando un código como este:

123456 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 cambiar el estilo de su menú de navegación usando esta estructura CSS.

12345678910111213141415161718181920212223// container class#header .primary-menu{}  // container class first unordered list#header .primary-menu ul {}  //Lista no ordenada dentro de una lista no ordenada#header .primary-menu ul {}   // cada elemento de navegación#cabecera .menú principal {} // cada elemento de navegación ancla#encabezado .menú primario {}  // Lista no ordenada si hay elementos desplegables#header .primary-menu li ul {}  // cada elemento de navegación desplegable#header .primary-menu li li li {}  // cada elemento de navegación ancla#header .primary-menu li li a {}

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

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

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

123456789101112131414151617181920// Clase para Página Actual.current_page_item{}  // Clase para la categoría actual.current-cat{}.  // Clase para cualquier otro elemento de menú actual.  // Clase para una Categoría.menu-item-type-taxonomy{}  // Clase para Post types.menu-item-type-post_type{}  // Clase para cualquier enlace personalizado.menu-item-type-custom{}  // Clase para la home Link.menu-item-home{}

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

Puede utilizar esta función para cambiar el estilo de los elementos del menú, como añadir iconos de imágenes con los menús o simplemente cambiar los colores para resaltar un elemento del menú.

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

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

Ahora puedes usar esta clase CSS en tu hoja de estilo para añadir tu CSS personalizado. Sólo afectará al elemento del menú con la clase CSS que haya añadido.

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

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

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

Básicamente, basta con apuntar con el cursor al elemento que se desea modificar, hacer clic con el botón derecho del ratón y, a continuación, seleccionar Inspeccionar herramienta en el menú del navegador.

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

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

A continuación se muestra un ejemplo de CSS personalizado que puede agregar a su tema para cambiar el color de la fuente de los menús de navegación.

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

En este ejemplo, el #menú superior es el ID asignado a la lista no ordenada que muestra nuestro menú de navegación. Necesitará utilizar la herramienta de inspección para averiguar el ID utilizado por el tema.

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

En primer lugar, tendrá que averiguar el ID de CSS o la clase utilizada por el tema para el menú de navegación que rodea al contenedor.

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

123.navegación-arriba{ color de fondo:#000; }

Aquí está cómo se veía en nuestro sitio web de demostración.

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

Usted puede haber 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 notorio.

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

Vaya a Apariencia " Menús y haga clic en el botón Opciones de pantalla en la esquina superior derecha de la pantalla. Esto mostrará un menú desplegable en el que deberá marcar la casilla situada junto a la opciónClases CSS.

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

Ahora puede usar esta clase CSS para cambiar el estilo de ese elemento de menú en particular.

1234.contact-us { color de fondo: #ff0099;border-radius:5px;}

Aquí está cómo se veía en nuestro sitio de prueba.

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

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

Simplemente agregue el siguiente CSS personalizado a su tema.

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

En este ejemplo, #top-menú es el ID de CSS utilizado por el tema para la lista del menú de navegación desordenado.

He aquí cómo se veía esto en nuestro sitio de pruebas.

5. Crear menús de navegación flotantes y pegajosos 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 y pegajosos permanecen en la parte superior mientras 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 pegajosos.

1234567891011121314#menú superior { fondo:#2194af; altura:60px; índice z:170; margen:0auto; parte inferior del borde:1pxsolid#dadada; anchura:100%; posición:fija; parte superior:0; izquierda:0; derecha:0; alineación de texto: derecha; relleno-derecha:30px}.

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

Aquí está cómo se veía en nuestro demo:

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

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

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

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

123#navegación del sitio { color de fondo:transparente; }

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

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

Esperamos que este artículo le haya ayudado a aprender a diseñar los menús de navegación de WordPress. También puedes ver nuestra guía sobre cómo añadir el menú de WordPress para móviles.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir