• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Modificar el orden de los elementos del menú en WordPress con CSS

Descubre cómo modificar el orden de los elementos del menú cuando un plugin añade alguno extra mediante CSS.

Algunos plugins, como por ejemplo Osom Modal Login, añaden elementos al menú que no puedes controlar desde Apariencia > Menús.

En el caso de Osom Modal Login añade al final del menú un elemento para acceder o salir. En general es el mejor lugar donde mostrarlo, pero ¿qué ocurre si quieres reservar esa posición para otro elemento? Por ejemplo, un CTA para suscribirse.

Por suerte no pasa nada porque con un poco de CSS puedes solucionarlo facilmente.

Vamos a ver cómo:

Snippet para modificar el orden de los elementos del menú en WordPress

Si deseas invertir el orden de los elementos del menú introduce este código al final del fichero style.css:

Para ver este código y los otros 1803 snippets de esta web,
identifícate o suscríbete aquí.

Ya ves lo práctico que puede ser flex. 😉

Este código está probado con el tema Genesis Sample pero debería de funcionar con prácticamente cualquier child theme de Genesis.

Si no estás usando un tema de Genesis, solo tienes que sustituir el elemento del menú. Por ejemplo, en el tema TwentyTwentyOne sería: .primary-navigation > div > .menu-wrapper.

Si tienes más de dos elementos de menú y solo con invertir el orden no es suficiente, puedes tener un control más indicando el orden concreto de cada elemento.

Este sería un ejemplo en que ordenas 3 items de menú:

Para ver este código y los otros 1803 snippets de esta web,
identifícate o suscríbete aquí.

En este caso, el orden sería:

  1. El item de menú con ID=75
  2. El item de menú de Osom Modal Login (Acceder/Salir)
  3. El item de menú con ID=135

Pero esto es solo un ejemplo para que te sirva de orientación.

Puedes aplicar esta estrategia a cualquier tema de WordPress y con cualquier plugin que añada un elemento al menú.

Conclusiones

Ya ves qué fácil modificar el orden de los elementos del menú cuando utilizar un plugin de WordPress que añade uno nuevo.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉

CSS Osom Modal Login WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?