Cómo destacar un elemento del menú de tu página web con CSS

21 de marzo de 2019
destacar elemento menu css

En este post quiero explicarte una manera muy útil y sencilla para poder hacer hincapié y resaltar un elemento del menú principal de tu página web. Por ejemplo, podrás poner una tipografía diferente para este elemento, cambiarlo de color, de tamaño, agregarle un color de fondo, etc. Puede servirte para darle más importancia y hacer llegar a tus usuarios a una página de tu sitio web, como por ejemplo tu página de servicios o de conversión, tu blog…

En este caso, te lo explico para que puedas realizarlo si tu sitio web está creado con WordPress. Si no es así, muy probablemente vas a poder extrapolar esta explicación a cualquier otro editor de contenidos.

Pues bien, comencemos…

Índice del artículo

¿Qué es el menú de una página web?

Probablemente ya sabes qué es el menú de una página web, pero por si acaso quiero explicarte brevemente qué es, cuántos menús hay y dónde suelen colocarse.

El menú de una página web no es más que un listado de enlaces de tu sitio. Si analizamos el código fuente, se trata de eso, una lista de elementos con enlaces a las diferentes páginas del sitio. La característica principal es que este menú está siempre (o casi siempre) presente en nuestro sitio web, acompañándonos en la navegación de cada una de las páginas. Puede que esté fijo y nos acompañe al hacer scroll o simplemente está en todas nuestras páginas del sitio, pero no continua al hacer scroll.

Existen diferentes tipos de menú: el más común, que aparece en la cabecera de la página web, el menú hamburguesa, que suele usarse en la navegación móvil, también hay menús en el pie de página, etc.

En este caso, te voy a explicar cómo destacar un elemento en un menú común en la cabecera de tu página web, pero como verás a continuación, la forma de realización en cualquier otro menú es la misma.

¿Dónde se edita o crea un menú en WordPress?

Si aún no tienes un menú en tu página web o lo tienes pero no sabes dónde se edita, accede a la administración de WordPress de tu página web. A continuación, a la izquierda, haz clic en Apariencia > Menús.

Ahí podrás ver tu menú, y si no lo tienes, ahí puedes crearlo. Añade las páginas que desees que haya en tu menú, ya sean las que hayas creado previamente, entradas, categorías, o links a otros sitios web.

Estupendo, pues vamos al «meollo» de la cuestión, ¿cómo edito un elemento del menú para darle un aspecto diferente y destacarlo?

Pasos a seguir para destacar un elemento del menú en WordPress:

1. Añadir una clase al elemento que quieres resaltar

A continuación lo que vamos a hacer es añadir una clase al elemento que quieres editar, la clase no es más que una palabra o palabras que luego vas a hacer mención cuando estés creando el código css.

Haz clic sobre el elemento en cuestión que quieres resaltar y escribe la palabra que quieras en el apartado de «Clases CSS (opcional)«. En mi ejemplo, yo he llamado a la clase destacado-menu.

Elemento menú

*** Un inciso, si no te aparece este apartado, es porque no tienes habilitada esta opción en las opciones de pantalla. Haz clic en Opciones de Pantalla, arriba a la izquierda y en Mostrar propiedades avanzadas de menú haz clic en Clases CSS.

Añadir clase menú

Perfecto, ¿ya le has creado una clase al elemento del menú que querías? Genial, pues no te olvides guardar los cambios y vamos a continuar.

2. Crear código css personalizado a ese elemento del menú

Ahora tienes varias opciones para crear el código CSS. Lo más probable es que tu theme tenga una sección de CSS personalizado en las opciones generales. Sino, puedes crear un tema hijo para poder crear y editar este código, o puedes editarlo con cuidado directamente en el editor de WordPress en Apariencia > Editor de Temas.

En mi caso, utilizo el theme Divi, y éste tiene en sus opciones generales del tema un apartado para crear fragmentos de código css personalizados. Si tu caso es como el mío, dirígete a Divi > Opciones del Tema. Baja hasta el final y en la sección de Código Personalizado vamos a personalizar el diseño de este elemento del menú.

CSS personalizado Divi

Lo que tienes que hacer es llamar a la clase que has creado antes, ojo a cómo la escribes, debes escribirla exactamente igual a como la creaste en el elemento del menú. A continuación, vamos a irle dando atributos a tu elemento: tamaño de texto, color, tipografía…

En mi caso, yo he realizado los siguientes ajustes:

.destacado-menu > a {
text-decoration: none !important;
padding: 10px !important;
color: #ffffff !important;
background-color: #69293a !important;
border-radius: 6px !important;
}

Código elemento destacado

Y este es el resultado:

Elemento resaltado menú

Para editar el elemento a tu gusto, debes conocer algunos aspectos básicos del código css. Recuerda también añadir !important tras el atributo que definas, para que prevalezca este diseño al que tu menú tiene por defecto.

Si te ha gustado aprender código css, te dejo también unos conceptos básicos de código html.

¿Qué te ha parecido el post?

¿Ves qué sencillo es resaltar y destacar un elemento del menú de tu página web? Cuéntame en comentarios cómo lo has hecho tú. Y ya sabes, si tienes cualquier duda estaré encantada de ayudarte.

¡Haz clic para puntuar este artículo!
(Votos: 4 Promedio: 4)

Únete a mi lista de emails

Newsletter

Déjame tu nombre y tu email para unirte a mi newsletter. Te enviaré un mensajito cuando escriba un nuevo post contándote brevemente de qué va, para que si te parece interesante entres a leerlo.

También te avisaré de novedades o noticias sobre WordPress, diseño web, Divi, etc. que puedan ser de tu interés.

¿Te apuntas?

Artículos relacionados

Cómo instalar una fuente en WordPress SIN PLUGINS

Cómo instalar una fuente en WordPress SIN PLUGINS

En este post te enseño una funcionalidad muy útil para tu página web: instalar una tipografía o fuente personalizada a mano, sin necesidad de activar ningún plugin, y de forma muy muy sencilla. ¿Por qué instalar a mano una tipografía en tu página web?...

leer más
Mi página web va lenta, ¿cuál puede ser el motivo?

Mi página web va lenta, ¿cuál puede ser el motivo?

¿Tu página web va lenta? En este post voy a analizar uno de los problemas más habituales e importantes con los que se encuentran los propietarios de páginas web: la velocidad de carga de nuestro sitio web. Este es un problema que no solo genera quebraderos de cabeza a...

leer más

Comentarios

18 Comentarios

  1. Cristian

    Hola
    Me parece muy bueno lo que comentas.
    Tengo una plantilla gratuita de WordPress y no me deja programar el CSS.
    Hay alguna forma de hacerlo?

    Responder
    • Leonor Cañuelo

      ¡Hola Cristian! Muchas gracias por tu comentario. Sí que lo puedes hacer en una plantilla gratuita, pero es un poco más complicado y arriesgado.

      Debes buscar las hojas de estilos que haya de tu plantilla y editarlas directamente. Puedes buscar estos archivos con Filezilla, por ejemplo, dentro de la carpeta de tu plantilla. Serán los archivos .css.

      Pero ten mucho cuidado y haz una copia de seguridad antes, porque aquí estás tocando directamente el código de tu página web. También recuerda que nunca debes borrar nada de lo que ya haya escrito en estas hojas de estilos, solo escribir debajo lo que necesites.

      ¡Espero haberte ayudado! Un saludo.

      Responder
  2. José María

    Gracias Leonor!

    Responder
  3. Antonio

    Buenas Leonor…he usado tu código..y fantástico. ¿Cómo puedo hacer para que al encogerse el menú no cambie de color?
    Gracias

    Responder
  4. Cristina

    Gracias me ayudo mucho!

    Responder
  5. Andrea

    Muchas gracias por el post! es justo lo que andaba buscando, aunque mi intención era hacer el cambio desde el tema hijo. Cuál sería el procedimiento en ese caso? Mil gracias!!!

    Responder
    • Leonor Cañuelo

      Hola Andrea! Muchas gracias, me alegro que te haya sido útil. El código es el mismo, lo único diferente es que lo tendrías que poner en el editor de tu tema hijo. Puedes dirigirte a Apariencia > Editor de temas, ahí seleccionas la hoja de estilos de tu tema hijo «style.css» y pegas el código al final de todo lo que ya haya escrito. Un saludo!

      Responder
  6. Ciclo creativo

    Me has ayudado muchísimo, es justo lo que había estado buscando, la verdad pensé que seria mas complicado.

    Fácil y sencillo, excelente post, mil gracias.

    Responder
    • Leonor Cañuelo

      ¡Me alegro mucho de que te haya servido! 🙂 Muchas gracias.

      Responder
  7. Cecilia

    Leonor, muchas gracias, muy claro tu paso a paso. Te hago una consulta bastante puntual a ver si me podés ayudar. Se puede añadir una clase al elemento del menú desde otro lugar? No me muestra el campo de CSS y el link «opciones de pantalla» (solo cuando estoy dentro de APARIENCIA > MENU) está bloquedo/grisado. Es un error raro, pero no se como solucionarlo.

    Responder
    • Leonor Cañuelo

      Hola Cecilia, muchas gracias por comentar! Pues sí que es raro lo que me comentas, puede que haya alguna incompatibilidad con algún plugin o con tu tema. Prueba a ir desactivando los plugins de tu sitio a ver si se desbloquea en algún momento, y si es así, ver si puedes prescindir de ese plugin… Un saludo! 🙂

      Responder
  8. Edgar

    Muchas gracias, Leonor, no soy programador y me funcionó mucho tu post. 😀

    Responder
    • Leonor Cañuelo

      Muchas gracias, Edgar! Me alegra que te haya sido útil 🙂

      Responder
  9. Manuel N.

    Gracias Leonor, me ayudó mucho el tip !
    Saludos

    Responder
    • Leonor Cañuelo

      ¡Gracias Manuel! Me alegro que te haya servido 🙂

      Responder
  10. Oscar

    Excelente tu explicación Leonor!!! Conseguí lo que me pedía mi clienta.
    Un favor más: ¿Cómo le podría poner un ícono a ese ítem destacado?

    Responder
    • Leonor Cañuelo

      Hola Óscar! Gracias, me alegro que te haya servido el post!

      Para colocar un icono, puedes probar instalando la tipografía de Font Awesome. También hay plugins que puedes instalar para colocar iconos en el menú o en cualquier otra parte de tu web.

      Un saludo! 🙂

      Responder

Enviar un comentario

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

Pin It on Pinterest

Share This