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 1867 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 1867 snippets de esta web,
identifícate o suscríbete aquí.
En este caso, el orden sería:
- El item de menú con ID=75
- El item de menú de Osom Modal Login (Acceder/Salir)
- 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. 😉
