Skip to main content
Known Participant
February 5, 2024
Answered

Cannot change BG colour in bootstrap Navbar

  • 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_
    quote

    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;

    }

     

    <nav class="navbar fixed-top navbar-expanded-lg nav-bg navbar-dark">

     

    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.

     

    1 reply

    BenPleysier
    Braniac
    February 5, 2024

    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!
    Known Participant
    February 5, 2024

    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

    Braniac
    February 8, 2024
    quote

    So what you are saying if l'm correct, you have to be a paying customer to view any remarks/opinions which are negative against the product, how does that help a potential customer before they commit financially to get a balanced view?


    By @osgood_

     

    • Is that what I showed you?????
    • Are you a paying customer?????
    • Are you a potential customer?????

     

    Yes, paying customers are also able to view the topics. For your information, I fail to see your point in this discussion.  That is my final statement to you in this discussion.

     


    quote
    quote

    So what you are saying if l'm correct, you have to be a paying customer to view any remarks/opinions which are negative against the product, how does that help a potential customer before they commit financially to get a balanced view?


    By @osgood_

     

    • Is that what I showed you?????
    • Are you a paying customer?????
    • Are you a potential customer?????

     

    Yes, paying customers are also able to view the topics. For your information, I fail to see your point in this discussion.  That is my final statement to you in this discussion.

     


    By @BenPleysier

     

    I could potentially be a paying customer, that l think answers your bullet points, clearly.

     

    Let's be clear because you are not, in my opinion. So non paying potential customers can only see positive remarks/opinions which are posted to the forum whilst negative remarks, even if posted by long term users of the product, get quickly taken down. If that is the case, as you seem to be implying then thats my point, it's rather concealing.

     

    For instance, l can no longer see the feedback post l was initially referring to (unless it's been re-instated since l last visited the forum) , whilst only paying customers can, is what you are confirming, l think.

     

    My only interest was observing what long term users thought, quite interesting, a balanced view and opinions to base information on. Of course everyone has different experiences and opinions but they all provide a better picture, whether positive or negative.