Edit background color of navbar in grayscale template

Hi together,

short explanation, grayscale uses the shrink option, if you scrolll, the transparent navbar becomes black and shrinks a little bit. I wanted to switch from the black color to another one and don't know, what i am doing wrong in BSS.

In the preview in chrome, I simply use the dev tools:

@media (min-width: 992px)

<h1>mainNav.navbar-shrink {</h1>

padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid hsla(0,0%,100%,.3);
background: #000;

}

and change the background color and it works. Scroll to the top and the navbar is transparent, scroll down and it is the color I changed it to. Exactly how I want it to be.

In BSS what do I have to do, to achieve this?

In BSS, it says I have to copy the CSS to be able to edit it. If I copy it and change the same color value as in Chrome dev tools, the navbar is always colored and if I scroll it gets black. Totally not what I want.

Where is the mistake? Also if I copy an element, doesn't the old one has to be deleted? Cause BSS doesn't allow that.

Thanks in advance.

When you copy CSS you need to copy it to a custom CSS file you create in the CSS section. I just name mine custom.css. That file of CSS values overwrites all the defaults as long as you set the order of the files so that your custom CSS file shows last in the list on the HTML. To do that just right click over the Styles title of that section of the Design pane and you'll get a menu. Choose "Include Order" and then drag and drop the files into the order you need them in. For CSS mostly it's just dragging your custom file to the bottom of the list. With CSS always it's whatever the last one seen is, that's the one that is applied, so in this case anything in your custom CSS file is applied and the rest are ignored (or maybe applied briefly where we don't see it as it goes too fast lol, not sure how that part works).

When you do this you are telling the browser to ignore the default CSS that is exported for those values. The reason you need to copy them is to preserve the original CSS from the default files, and it makes it a whole lot easier for the devs to update the Bootstrap code when Bootstrap updates if the devs don't have to worry about what you've changed in the default Bootstrap files.<br /> Also, this is actually the proper way to do things when you have default files from any framework such as Bootstrap, Foundation, etc. and even when you get files from people that create elements for sites it's good practice again to just copy them and alter them that way rather than changing the default code directly.

As for your mistake hopefully someone else can help you with that, but at least now you should understand why the default CSS doesn't have to be deleted.

that specific template uses an old javascript trick. Adds (and removes) a class to a div according to scroll offset. See the first answer here

I don't see any color values being changed there?

I don’t see any color values being changed there?

javascript is to add/remove the class, background and other style attributes are defined in the css files

In that specific example when scrolling #mainNav with a background:transparent for (min-width: 992px) gets a new class added and #mainNav.navbar-shrink has background:#000

hth

enter image description here

Got it, thanks a lot!

Okay... I can't get it to work.

I think i need something like this:

$(".navbar-shrink")element.style.backgroundColor = "#FFFFFF";

How do i integrate this into this posted code?

$(document).ready(function() {

// Put your offset checking in a function
function checkOffset() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    }     
    else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    $(".navbar-shrink")element.style.backgroundColor = "#FFFFFF";
    }
}

// Run it when the page loads
checkOffset();


// Run function when scrolling
$(window).scroll(function() {
    checkOffset();
});

});

Thanks for help!

For what it's worth the following page showed me how to do something like this in a blank template.

Navbar change color on scroll

Nope, you don't need any additional js code. Just re-define the color you want. That's not a with BSS, but basic HTML/CSS website building.

Create a new website based on that template, and just add the property you need.

enter image description here