So I just started using Site Designer and am working with a Vanila bootstrap 4 theme. On the Nav bar the default background color is Blue. I want to change that element. However, when I select the container and then change the background color, it doesn't change it because I can't seem to select only the class .bg-primary which in the bootstrap css has this when I do a preview and view elements.
main.css

@media screen and (min-width: 62rem)
.container-grid.bg-primary {
position: -webkit-sticky;
position: sticky;
//background-color: #fee250;
vertical-align: top;
}
.container-grid.bg-primary {
// background-color: #fee250;
}
.bootstrap4.css
.bg-primary {
background-color: #007bff !important;
}

This is the css I end up with and as you can see Bootstrap is overriding any bg-primary colors that I set.

How can I change this or is there a way to edit the raw css?


Thanks.

Just trying to understand: You are working in SD, in the Vanilla framework, and then you are recreating a Bootstrap theme, importing Bootstrap classes and js? If I'm right so far, from where did you get the Bootstrap theme, from the Theme shop at Coffeecup, or from somewhere else?
Seems a bit over-complicated to me, why not use the Bootstrap framework to build your site? You would have no problems changing the background colour in that case.

Anyway, if you want to do it in your own way, you could try adding some styles to the Page Manager head section, and also use the '!important' property for the element(s) you want to change the colours of.

I just realized that there is also a vanilla. What I meant to say is I am using Blank Bootstrap 4 Theme. Not Vanilla.

this is the theme I started with.
Then I added a nav component and wanted to change the background color but It will not change the background because Bootstrap CSS overrides my css because bootstrap css has the .bg- as an !important. See my previous image of the css that gets generated.

OK, so now we're talking!

See that wee file I'm attaching. I removed the class .bg-primary from the holding container, and then I can change the background colour as I please.

Thank you so much. I didn't realize that I could remove the classes and make my own. This worked.