How to change Bootstrap navbar bg and text color?

Question

currently using<nav class="navbar navbar-default">
bg change but not text color <nav class="navbar navbar-light bg-primary">

https://code.sololearn.com/W6QBWamm9gFf/?ref=app

Answer 1

This targets the text in your drop down menu and overrides the style.

.navbar-default .navbar-nav>li>a {
color: red !important;
}

Answer 2

It doesnt change the font color.

Answer 3

You must specify the full path of the first and last container:

.navbar .navbar-header a {
color: orange;
}

Or <nav class='navbar text-primary'>

Color:
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white

Answer 4

There are different ways to change the Bootstrap navbar background and text color, depending on the version of Bootstrap and the level of customization desired. Here are some possible options:

- Use the built-in color classes for the navbar component, such as navbar-dark, navbar-light, or navbar-primary, to set the appropriate contrast and theme for the background and text color. For example, <nav class="navbar navbar-dark bg-primary"> will create a dark text on a primary blue background. See the documentation for more details: https://getbootstrap.com/docs/4.6/components/navbar/#color-schemes
- Use custom CSS to override the default navbar styles and apply the desired color values to the navbar and its elements. For example, to change the navbar background to green and the text color to white, you could use something like:

.navbar {
background-color: green;
}

.navbar .navbar-brand, .navbar .navbar-nav .nav-link {
color: white;
}

See the documentation for more details on the navbar structure and classes: https://getbootstrap.com/docs/4.6/components/navbar/#supported-content
- Use Sass variables and mixins to customize the navbar colors and other aspects of the Bootstrap theme. This requires compiling the Sass files and importing the custom CSS

Answer 5

Kim Jonas Cabugayan

I just gave you example how you can override bootstrap css

Answer 6

Thanks for your help guys!

https://code.sololearn.com/W7GeEtHkcrS6/?ref=app

Answer 7

Well that result is a lot different than what we thought you were asking about in your question...

Answer 8

Chris Coder
I'm trying to make the navbar-brand color danger(Kim Jonas Website) while the navbackground is transparent, then make it white when navbar bg appear.

Answer 9

Just apply css to override bootstrap css

.navbar {
background-color:red;
color:#fff;
}