Contents
Haga clic con el botón derecho del ratón en su menú de navegación y elija Inspeccionar. Aparecerá un panel de inspección en la parte inferior de su pantalla, donde podrá ver el código subyacente de su sitio web. El lado izquierdo reflejará el HTML mientras que el lado derecho mostrará el código CSS que necesitas modificar.
Busque el ID CSS de su tema o la clase que su tema utiliza para el contenedor que rodea su menú de navegación. Este es el código que debe utilizar para modificar el color de fondo. En un ejemplo, el código se ve así:
Cambiar el color de fondo de su menú puede hacer que sus elementos de menú sean más difíciles de leer. Querrá ajustar el color de la fuente de sus elementos de menú y enlaces para asegurarse de que los visitantes puedan seguir viéndolos. Puedes hacerlo con el siguiente código:
Publique los cambios y luego seleccione el menú que está estilizando. Haz clic en el elemento de menú que quieras estilizar y, en la Clase CSS, introduce un nombre corto como «.custom» o «.cta». Publica los cambios y luego vuelve a la sección CSS dentro del Personalizador.
Una navegación adecuada en el sitio web garantizará que sus visitantes tengan una mayor facilidad para localizar sus contenidos y servicios, lo que hace más probable que permanezcan en su sitio durante más tiempo. Utiliza los consejos anteriores para distinguir tus menús y proporcionar la mejor experiencia de usuario posible.
Sin mencionar que las clases de menú incorporadas en WordPress pueden ser bastante confusas. Hay menu-item-type-taxonomy, current-menu-parent, current-menu-ancestor, y un montón de otros selectores de confusión entre los que puedes elegir para hacer que el estilo de tu menú sea tan divertido como arrancarte el pelo.
Así, en lugar de utilizar las herramientas de desarrollo de tu navegador para apuntar a un nombre de menú casi sin sentido, puedes crear tus propias clases de menú que son mucho más fáciles de recordar y mucho más fáciles de estilizar.
Asegúrese de marcar la casilla de las Clases CSS en el menú desplegable de Opciones de Pantalla. Después, abre la página que quieres editar. Verás que se ha añadido una nueva sección a tus elementos de menú.
Los menús adhesivos (o navbars) son ahora un elemento básico en el diseño web. Pero cuando no lo eran, había que desplazarse hasta la parte superior para navegar a otra página. Naturalmente, esto resultaba incómodo y torpe para los usuarios.
Un menú fijo es una barra de navegación estática que permanece visible mientras el visitante se desplaza hacia arriba y hacia abajo en una página web. Los menús fijos son siempre accesibles y ayudan al visitante a navegar por su sitio web mucho más rápidamente. Ahora se utilizan ampliamente en la web.
Lo mismo ocurre con un sitio web de WordPress. Tanto si tienes un blog de viajes, una tienda online o un sitio de portafolio personal, debes asegurarte de que la navegación de tu sitio web facilite a los usuarios encontrar lo que necesitan y convertirse en suscriptores o clientes. Como una buena navegación mejora la experiencia del usuario, puede mejorar el tiempo de permanencia, un factor crítico de SEO.
Los menús fijos ofrecen una solución sencilla a este molesto (y largo) problema. Con una barra de navegación fija, los visitantes pueden encontrar rápidamente lo que necesitan. Mejora la experiencia del sitio web y atrae al visitante a consumir más contenido, lo que se traduce en una menor tasa de rebote.
– Vamos a escribir algo de CSS para que el menú y la etiqueta del menú se alineen correctamente. Antes de escribir cualquier código, déjame inspeccionar el html para saber qué selectores CSS debo usar. Así que, haz clic con el botón derecho del ratón en información de la empresa. Y aquí veo la clase div menú contenedor secundario. Vamos a seguir adelante y utilizar eso. Así que voy a copiar esto. Y vamos a cerrar esto. Ir a mi editor de código. Y aquí puedo ver el CSS existente para el menú secundario. Vamos a seguir adelante y cambiar esto a menú secundario contenedor ul. Y haremos un duplicado para el menú contenedor secundario y la etiqueta de párrafo. Ahora mismo ambos están siendo reducidos. Vamos a asegurarnos de que se alinean en la misma línea. Voy a cambiar esto para mostrar. Inline-block. Y lo mismo para el ul. Guarda ambos. Volver a nuestro sitio. Y ahora se alinean en la misma línea. Una cosa más. Vamos a añadir un poco de espacio aquí. Así que voy a volver al código, y bajo el párrafo sólo voy a decir margen-derecha. 10 píxeles. Ya está. Siente…
