Change Navbar BG Color In Greyscale Design

How can I change the background color of the navbar from black(#000000) to whatever color & keep the javascript scroll transparency at the top?

Now I can change it in #mainNav class by copying it to a new style then change it from the #000000 to whatever color but I have to add !important at the end. This breaks the javascript of the nav that makes it transparent when it’s scrolled to the top & I want to keep the transparency.

It’s the class #mainNav.navbar-shrink you want to edit
#mainNav.navbar-shrink {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid hsla(0,0%,100%,.3);
background: #000
add that to your styles.css and change the background to whatever color you like

1 Like

Hi and thanks kuligaposten that’s exactly what I’ve bee trying to achieve.

Where do I find that css (and the rest) to view?

I checked on the Bootstrap site under Navbar but nothing.

The grayscale theme comes from Start Bootstrap, the theme is updated not long ago and has another look now. You can read more about it here
Here is an example with a service worker and a manifest added to the page so it works offline too ,you can install it as an app to see how that looks like

That seemed to work after I added to home screen on ios device, turned off wifi, turned on airplane mode and the links scrolled to locations. Did you get a email ? :email:


There is no action linked to the form so you can not send an email. If I add an action to the form, it would work both online or offline. This is not a real app just a demo of what the Grayscale theme looks like as an app


Thats interesting because I was not connected to wifi or phone service (airport mode) and the app icon when clicked still showed everything and functioned. I am not sure email would be able to be sent until you come in contact with wifi or phone service again. I have read about PWA apps that have shopping carts that let you add to the cart and then will notify you to do checkout when you connect again.