Menú transparente sin plugins para cualquier Theme WordPress

Menú transparente

Indice de Contenidos

Cómo diseñar un menú transparente con código CSS

Te mostramos como crear un menú transparente en pocos pasos y sin la necesidad de utilizar ningún plugin. Además, sirve para cualquier Theme que estés utilizando y solo con unas líneas de código CSS.

Para poder añadir código CSS, lo más importante es utilizar un Tema hijo o un Child Theme, de esta manera podrás actualizarlo sin problemas. En el video estoy utilizando el tema Astra, aquí podrás descargarte su Clild Theme, en caso de que utilices Hello de Elementor aquí tienes su tema hijo.

Tu menú transparente en 4 pasos

  1. ¡¡Empecemos!! Lo primero es entrar en “Apariencia” y luego en “Personalizar” de esta manera podremos añadir código CSS Adicional.

  2. Lo siguiente es inspeccionar la página para encontrar el contenedor donde esta alojado el Header. Una vez localizado, hay que copiar el nombre del estilo CSS para poder añadirle nuevas líneas de código.

  3. Cuando lo tengas, te vas a la opción de “CSS adicional” y copias el nombre del estilo con un punto “.” delante. Ya estas listo para añadir código.

  4. Para finalizar solo te queda añadir estas líneas de código y listo.

    {background-color:transparent;
    position:absolute;
    width:100%}

¡¡Todo listo!! Con estas tres líneas de código CSS tu menú transparente quedara perfecto, recuerda que el logo debe estar también con el fondo transparente para que no se vea como un recuadro blanco en el header.

Lo más recomendable es subirlo en formato PNG y optimizado para reducir su tamaño. También es importante que el color del texto del menú tenga un buen contraste comparado con el fondo así, se podrá leer sin ningún problema.

Recuerda, muchas veces con unas pocas líneas de código se pueden hacer cambios de diseño importantes, aunque lo más fácil es buscar un plugin para esto. Si puedes hacerlo a mano y ahorrártelo, mucho mejor, ya que consumirás menos recursos por lo que tu web será más rápida.

Deja una respuesta

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

Sobre la Nube

Somos unos apasionados del Marketing Digital. Buscamos soluciones para pequeños negocios.

Auditoria Seo gratis

Analizamos tu web y te mandamos un diagnostico detallado de sus problemas y como se podrían solucionar.

seo y optimizacion web

Advertencia sobre el uso de Cookies:

Utilizamos cookies, propias y de terceros, para garantizar la navegación por el sitio web y mejorar nuestros servicios. Si continua navegando, consideramos que consiente su uso. Acceda a nuestra Política de Cookies para obtener información adicional sobre las cookies utilizadas, su finalidad y la forma de gestionarlas.