Modificar el menu secundario del tema extra y no morir en el intento

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.

Modificar el menú secundario del tema extra de elegant themes

 

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í:

resultado final mostrando el Menu secundario en el tema extra de elegant themes de forma permanente

 

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í 🙂

Acerca del autor

Oscar Fernández Herrero

Diseñador gráfico y web ¿ Te gustaría mejorar el aspecto visual de tu proyecto? Ayudo a bloggers y a emprendedores a mejorar su credibilidad por medio del diseño, ya que una primera buena impresión puede ser definitiva a la hora de conseguir tu próxima conversión. ¿Te animas?

Deja una respuesta

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

Responsable del fichero: Óscar Fernández Herrero.Finalidad:moderar comentarios. La Legitimación; es gracias a tu consentimiento.Destinatarios: tus datos se encuentran alojados en mi plataforma de hosting de Webempresa. Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos enviando un email a oscar@creativolandia.com o ante la Autoridad de Control.Encontrarás más información en política de privacidad

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Comentarios

  1. Olga dice

    Muy interesante y útil tu artículo. La verdad es que hoy por hoy no he encontrado apenas artículos en español acerca de Extra a pesar de que utiliza Divi builder.
    Hay muchos aspectos de Extra, me imagino, que facilmente personalizables, para los cuales no hay una documentación (o lo pasan muy por encima) por parte de Elegant Themes. Por ejemplo, el ancho de las pantallas, imágenes, qué aparece y no aparece en función del dispositivo utilizado, etc.

    En resumen, se agradece mucho este tipo de artículos, son de mucha ayuda.

    Un saludo

    • Oscar dice

      Muy buenas Olga!!!

      En breve Crearé una guía para empezar con extra, pues estoy recibiendo varios Emails preguntando acerca de él. Ciertamente no hay apenas documentación así que me veo en la obligación de hacer en breve algún aporte.

      Tomaré en cuenta lo que comentas para incluir info al respecto.

      Este post lo escribí porque recibí un Email preguntándome como hacer esto y me pareció interesante ponerlo en el blog para todos aquellos que tuvieran la necesidad.

      Un fuerte abrazo y gracias por comentar.

    • Oscar dice

      Buenas Flavio, el CSS es específico para este tema, no creo que te funcione en ningún otro tema de WordPress, ya que Extra tiene clases únicas que sólo usa él.

      Ahora, los estilos, si los aplicas a otro tema del que conozcas claramente su estructura de clases, quizá haciendo algunas modificaciones puedas.

      Gracias por comentar, fuerte abrazo!!!!