¿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.
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.
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.
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.
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.
Puede hacer clic en cualquier propiedad que desee cambiar. CSS Hero te mostrará una interfaz simple donde puedes hacer tus cambios.
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.
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:
