Known Participant

Answered

Cannot change BG colour in bootstrap Navbar

Forum|Forum|1 year ago
February 5, 2024
1 reply
3605 views

Hi everyone

I am a complete beginner in DW this question might sound stupid but I could not find anything on the internet for this specific problem.

So, I am trying to create a website, with Bootstrap, and I have a couple of questions.

How do I change the BG colour of my navbar? I have followed a tutorial on YouTube but, despite I do everything the guy does my colour won't change.

Created a new style.css sheet, added a selector for the navbar, and changed BG colour to red, but as you can see the colour is still White.

thanks for any help you can provide

This is the code:

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Logo</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent1">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
              <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
              <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Something else here</a> </div>
              </li>
              <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>

This topic has been closed for replies.

Correct answer osgood_

and if I want to make it another color other than red I can't do it

By @Stephan5FE6

Change the color of the Bootstrap css selector bg-danger:

.bg-danger {

background-color: purple!important;

}

or better, rather than deface the default Bootstrap values make your own css selector

.nav-bg {

background-color: darkolivegreen;

}

Never directly alter the Bootstrap default css file, unless you're an expert. If you are going to overide the default css values do it in a seperately link stylesheet, which should be linked to your page after the link to the Bootstrap default css file, or you can embed the css styles in the head of the page whilst building.

BenPleysier

Community Expert

Change the first line to

<nav class="navbar fixed-top navbar-expand-lg bg-danger navbar-dark"> <a class="navbar-brand" href="#">Logo</a>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

S

Stephan5FE6Author

Known Participant

Thank you very much this does the trick, I do not understand why can't I change it from the properties tab, and if I want to make it another color other than red I can't do it

O

osgood_Correct answer

Brainiac

and if I want to make it another color other than red I can't do it

By @Stephan5FE6

Change the color of the Bootstrap css selector bg-danger:

.bg-danger {

background-color: purple!important;

}

or better, rather than deface the default Bootstrap values make your own css selector

.nav-bg {

background-color: darkolivegreen;

}

Never directly alter the Bootstrap default css file, unless you're an expert. If you are going to overide the default css values do it in a seperately link stylesheet, which should be linked to your page after the link to the Bootstrap default css file, or you can embed the css styles in the head of the page whilst building.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded