Modificar el menú secundario del tema extra de elegant themes

En ocasiones cuando elegimos un tema, necesitamos que este se adapte a nosotros y a nuestras necesidades y no al revés, este es el caso de un lector del blog que me ha pedido ayuda para modificar el menú secundario del tema Extra de Elegant Themes de forma que se despliegue horizontalmente y esté siempre visible ocupando la mitad del ancho de la barra superior o top bar.

Quizá también te interese leer mi review sobre el Tema Extra de Elegant Themes que puedes encontrar aquí. 

En este tema, este menú por defecto aparece como un desplegable desde el top bar o barra superior, mediante el icono hamburger , justo al lado de lo más trending del blog.

Si nos ponemos a pensarlo fríamente, ese menú es un poco estúpido ya que es muy poco usable, en el único momento que está más visible es cuando el tema se visualiza en los móviles, y aparece a continuación del principal desde el menú responsive.

Encima si no pones ningún elemento en este menú, el botón hamburger siempre aparece de modo permanente, como si fuera un adorno sin sentido y por mucho que lo pulses no pasa absolutamente nada, ah!! bueno si, que aparece la X para que puedas cerrarlo

Por defecto no se puede Modificar el menú secundario del tema extra de elegant themes por medio de la configuraciones standard del propio tema, es decir que el tema se ha concebido para que ese menú se muestre siempre así, y no han puesto opciones de personalización a este respecto.

Literalmente no hay espacio suficiente en el top bar para desplegar el menú de la forma habitual, a lo largo, como aparece en Divi,  ya que realmente ese espacio está reservado para las tendencias del blog (trending), y el lado derecho queda reservado para: iconos sociales, caja de busqueda y carrito de la compra.

Es decir que ese menú está un poco puesto ahí por ponerlo en algún lugar, y poder decir que hay un menú secundario, yo por lo menos no le encuentro otra explicación.

Para poder Modificar el menú secundario del tema extra de elegant themes tendremos que sumergirnos en el código.

Primeramente necesitaremos extirpar el código php y html referente al rotativo de lo más trending del blog, para posteriormente usar ese espacio para desplegar nuestro menú secundario de forma horizontal, ya que ambas cosas no pueden convivir a la vez, como hemos dicho no hay espacio para ambas.

También necesitaremos echar mano del CSS para cambiar la forma en que el menú se muestra, para que deje de mostrarse primero mediante un botón, segundo como un dropdown vertical y finalmente de forma horizontal.

A# Instalar un tema hijo del tema Extra de elegant themes.

Para poder llevar a cabo esta misión lo primero que necesitamos hacer, esto es muy importante, es tener instalado un tema hijo del tema Extra de Elegant Themes.

NO he dicho obligatorio pero sí necesario.

Siempre que instalemos un tema tenemos que acostumbrarnos a trabajar con temas hijo(child-theme) en nuestro blog.

El tema hijo nos va a permitir hacer modificaciones sobre el tema padre, de esta forma no las perderemos durante las actualizaciones.

Si hiciéramos estas modificaciones directamente sobre el tema padre, sin instalar un tema hijo o child theme, en el momento que actualicemos el tema padre, todas las modificaciones literalmente se van a borrar, ya que cuando se actualiza un tema en WordPress se cambian literalmente una versión por otra.

El uso de un tema hijo nos garantiza que esas modificaciones hechas sobre el tema se mantengan.

Si no tienes un tema hijo instalado te puedes descargar a continuación uno que yo he creado para ti. Sólo tienes que suscribirte a través de la caja que hay a continuación y se desbloqueara para ti.

Si quieres saber más sobre temas hijo en Divi o en Extra puedes leer: Crear un tema hijo para Divi o Extra de elegant themes

B# Manos a la obra vamos a modificar el menú secundario del tema extra de elegant themes

Vamos a ponernos los guantes de cirujano y vamos a proceder con la operación y así poder modificar el menú secundario del tema extra de elegant themes.

1.- Quitando lo que no nos sirve:

En primer lugar sacaremos el bisturí y vamos a cortar todo lo que sobresalga 🙂  bueno o a extirpar el código referente a lo más trending.

Ya que aunque no lo quitásemos nos estaría estorbando enterrado debajo del menú, una vez lo despleguemos correctamente de forma horizontal.

Y no tiene caso mantenerlo, pues nos estaría chupando recursos innecesarios y tiempos de carga, aunque fuese un poco, todo suma.

Tendremos que dirigirnos al archivo header.php de nuestro tema, en este caso de nuestro tema hijo.

Si el tema hijo lo habéis creado vosotros mismos, y no tiene un archivo header.php simplemente copiadlo del tema original y pegarlo en vuestro tema hijo.

Sí ya lo tiene simplemente modificarlo.

La parte del código que no, nos interesa, se encuentra entre las líneas 50 y 91, ambas incluidas.

Básicamente lo que habría que quitar sería esto:

Ya hemos conseguido el espacio que necesitábamos para poder mostrar nuestro menú, vamos a por el siguiente paso

2.- mostrando nuestro menú:

Ahora hay que echar mano del CSS

Nos vamos al archivo style.css de nuestro tema hijo.

Le añadimos el siguiente código CSS:

Voy a interpretar el código para tí.

Empezamos creando el espacio necesario para que se muestre, en principio no necesitaba mucho ancho ya que al ser un listado desplegable, no necesitaba más espacio que el que ocupasen los elementos del menú, pero ahora al desplegarse en horizontal hay que hacerle hueco.

Teniendo en cuenta que en el otro extremo están los iconos sociales he decidido reservar en principio la mitad del espacio para el menu width:50%;

El siguiente paso sería hacer nuestro menú visible de forma permanente, en principio no es visible ya que la propiedad display está en none, es decir que por defecto no se muestra, sólo se mostraría en el caso que hiciésemos click en el icono de hamburger, por lo que para que se muestre de forma permanente deberíamos poner la propiedad en display:block;

Como veis también le hemos dado un valor negativo a la posición top (superior) para que ocupe su lugar en el top bar y no aparezca por debajo, como pasaba cuando era un desplegable.

A continuación ponemos el ancho al 100% del contenedor, simplemente para que ocupe el ancho total definido arriba por el contener padre, que como hemos dicho ahora ocupa un 50%, esto lo hacemos para que el menú ocupe el espacio que le corresponde, si no lo pusiéramos, el menú seguiría mostrándose de forma vertical ya que no podría permitirse ocupar ese espacio.

También le hemos puesto en auto la propiedad width a los elementos del menú para que ocupen el espacio que necesiten.

Finalmente le damos un poco de estilo al texto del menú, cambiando el color del texto y poniéndolo en negrita y nos quedaría algo así:

Si no te ves capaz de poder modificar el menú secundario del tema extra de elegant themes, te he preparado un tema hijo con los cambios ya realizados que puedes descargar a continuación, sólo tienes que suscribirte al blog desde la caja que hay a continuación y será tuyo.

Bueno espero que este post te haya servido para poder mejorar tu tema Extra de elegant themes y no perder la cabeza en el intento.

Si quieres comentar o preguntar cualquier cosa no olvides usar los comentarios respondo siempre 😉

Un fuerte abrazo!! te espero en el próximo post, nos vemos por aquí 🙂