Saltar al contenido

MENÚ ESTÁTICO SIN PLUGINS – (Sticky navBar)

marzo 8, 2019

Quizá hayas intentado realizar esta acción hace tiempo, o incluso te parecía interesante viéndolo en otras webs.

Pues aquí te digo, BASTA de ENVIDIARLES, te compartimos el código y las instrucciones para poner el Menú Estático SIN Plugins 2019.

Los pasos son sencillos y te los voy a explicar de forma que consigas resultados óptimos.

Dirígete a /Apariencia/Personalizar/ CSS Adicional, como ya debes conocer aquí es dónde podemos realizar cambios al css de nuestro tema.

Por favor copia y pega el siguiente código CSS:

/*menuSticky*/
.default-header .title{
margin-top:40px;}
.site-header {
width:100%;
background-color:#ffd600;
position:fixed;
top:0px;
z-index:999;
box-shadow: 0px 10px #fff;
opacity:0.99;}

Inmediatamente verás los resultados y ya dispondrás de un menú estático, solo te faltará personalizarlo a tu gusto, por ejemplo.

Si quieres cambiar el color de la barra modifica el parámetro background-color:#ffd600;, puedes utilizar valores como red, blue, light-blue en cuyo caso deberás quitar el signo numeral (#).

Ó podrías utilizar el código hexadecimal te recomiendo la web: Html Color Codes, es más sencillo.

codigo de colores orbital theme sticky navBar

Me permito recordarte que este código afectará a las “vistas” tanto desktop, tablet y mobile, a continuación te comparto el código para solamente aplicar el menú sticky en la versión desktop.

Menú no Sticky en Tablet o Mobile

Varios usuarios me han consultado, como conseguir el menú sticky pero que este solamente se aplique en la versión desktop.

En ese caso, además del código superior debes agregar el siguiente código css:

@media screen and (max-width: 1050px) {
/*menuNOStickyMobile*/
.site-header {
position:absolute;}}

Este código afectará tanto a mobile como tablet, si requieres que solo se aplique a la versión mobile.

Entonces, modifica max-width:600px, así el menú sticky se aplicará a las versiones desktop y tablet. Sencillo ¿verdad?

Eso es todo, espero hayas disfrutado y que te haya ayudado. Coméntame que más te gustaría modificar.

Christian E. Muñoz

Me gustan las computadoras, el Marketing, Internet y nuevas tecnologías.
¡Vamos lo que se llama un geek!