Hello all.
I want to change the color of the navbar to the following color #70342B
Can someone please direct me to how this is accomplished.
With the Navbar Selected I see the Options panel and background only allows me to select from a pre-defined colors. What am I missing?
Any help is appreciated. Please be as detailed as time permits.
Thanks
Hello,
You can give the navbar’s root element an ID (say “mainNav”) and use CSS or SCSS:
<nav id="mainNav" class="navbar">
<div class="container-fluid">
<!-- etc -->
</div>
</nav>
[data-bs-theme=light] {
#mainNav {
background-color: var(--bs-light);
}
}
[data-bs-theme=dark] {
#mainNav {
background-color: var(--bs-dark);
}
}
That’s how I do it using SCSS.
First of all, thanks for your response. However I am not certain how or where in bootstrap studio this is accomplished.
I was hoping to use the appearance and/or Options panels to accomplish the task of changing navbar color. Studio is supposed to be visual designer right!
I was able to work out the following:
Step 1: Add a navbar component to the page
Step 2: With navbar selected click on the Options panel and with the Navbar Options expanded change Background from Body BG to Default
Step 3: In the Appearance Panel simply change the Bg Color to desired color.
Problem now is figuring out how to change the color of the text links 
Sorry for not providing an exact example. If you do not want to use color themes (like light/dark), then you can simply use the CSS:
#mainNav {
background-color: #70342B;
}
Or as you did, one can do the same by setting the Bg Color.
Thanks again 
Your last example works as well. I am working out how and where to add the id and css code from within bootstrap studio.
Now have to figure out the best way to change the navigation links to white.
Should I look at targeting the Nav Item or the Link # items??
The challenge continues…
I really think you would benefit more from going through the Docs (on top menu of the forums and site) and learn the basics of how to use the app instead of winging it. Makes things a whole lot clearer and less frustrating when you’re trying to figure things out.
@jo-r
Reading the documentation is always a good suggestion! So I read over how to handle styles in bootstrap studio. However learning which classes to target when it comes to the Navbar component is not trivial for one starting out.
Might you have a suggestion as to where to look for changing Navbar or Nav link colors??
Another approach…
First, you can quickly see what classes target a particular component by clicking on the component and looking at the Attributes panel. In the field Class Names, you will see the Bootstrap CSS class (or classes) that are applied to the component. If you look at the Styles panel, you will see the actual CSS rules that comprise these classes.
If you add a Navbar component to a new project, and click it, you will see three Class Names…
navbar navbar-expand-md bg-body
The class bg-body contains the rule that sets the color of the Navbar background, which is…
.bg-body {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-body-bg-rgb),var(--bs-bg-opacity))!important;
}
If you want to change the background color of the Navbar through the visual interface (so you don’t have to write any CSS), select it, then go to the Appearance panel > Background > BG Color and change the color to what you want (for the purposes of this example, I will use solid red.) This will add inline CSS styling which you will see in the Styles panel thusly…
element.style {
background: rgb(255,0,0);
}
Now you will say, “but the background color of the Navbar did not change!” This is because in Bootstrap 5.3, the .bg-body class with the background-color rule uses the uses the !important declaration. This overrides the inline style we just created. To force our new style to override the Bootstrap style, we simply manually edit the CSS we created and add the !important declaration to the rule…
element.style {
background: rgb(255,0,0) !important;
}
Then, in the Style panel, click the three dots to the right of the rule, choose Extract Rules, pick the CSS stylesheet in which you want your rule to reside (ex. styles.css), and you’re done.
Now, as I learned CSS many years ago, the use of the !important declaration was to be avoided as much as possible. The belief was that relying on !important to style your website usually meant you weren’t writing your CSS correctly. But Bootstrap (for whatever reason) has embraced the use of the !important declaration throughout their default CSS, which forces us to use it to override the default styling.
Thank You for taking the time to share this information! Very helpful
I was not aware of the !important property: good to know
I am attempting to recreate a couple of websites as close to original (including colors) as possible as a learning project. Your information helps me better understanding the bootstrap studio interface and how to manage the css. The next step is to work out the intricacies of nav-item, nav-link and the various states and of course the hamburger color in order to change coloring.
I am beginning to understand the need to learn css and in particular the bootstrap framework in order to fully make use of bootstrap studio.
Thanks again!
Sorry, I should have been clearer. What I meant was from the beginning to the end of the Docs, not just for the part you’re working on. Most of the answers you’re seeking are there and if not then coming here is a great place to further your knowledge, as well as learning more about CSS and Bootstrap too. Lots to learn, but I think you’re up to the task!
P.S. Bootstrap Studio isn’t a 100% visual tool as yet. Not sure if that’s where they’re going with it or not, but there is some coding knowledge needed to really fine tune things, as you’re already finding out.