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:
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.
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.
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
// 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();
});
