Tinc el tema grayscale.css al Bootstrap, i la classe que mostra la barra inicial és .navbar, i quan baixem l'scroll i es fa una miqueta més menuda és .top-nav-collapse, concretament són:
@media(min-width:767px) {
.navbar {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
background-color: #000;
}
Un truc molt ràpid és canviar la mida d'aquesta amplària i, enlloc de ficar 767px ficar, per exemple, 5000px, aleshores nomès la gent amb pantalles de més de 5000px veuran la navbar ampla com al inici (eixes pantalles nomès les fan servir a la NASA :-)
Aleshores, modifiquem i tenim:
@media(min-width:5000px) {
.navbar {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
background-color: #000;
}