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.
Menú transparente fácil con 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
- ¡¡Empecemos!! Lo primero es entrar en “Apariencia” y luego en “Personalizar” de esta manera podremos añadir código CSS Adicional.
- 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.
- 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.
- 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.
