Member Avatar for davy_yg

Hello,

I am trying to create bootstrap navigation with background color of my choice yet, I haven't been able to do so. The default boostrap nav color is grey. How to change it to color of my choise like brown. I try to insert css inside navigation2.php codes - and the result is still not neat.

Please help to make it looks good. Thanks before

navigation2.php

<meta name="viewport" content="width=device-width, initial-scale=1.0">     
<link  href="css/bootstrap.min.css"  rel="stylesheet"> <!--bootstrap css -->
<link  href="css/bootstrap-responsive.css"  rel="stylesheet"> 
<link  href="css/custom.css"  rel="stylesheet"> 
<!--bootstrap responsive css --> 


<div class="container">
<div class="row" style="margin-top:10px;">
<div class="navbar">
     <div class="navbar-inner">
        <div class="container" style="background-color: brown;">
          <!-- Menampilkan tombol trigger -->
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a><!-- Akhir dari tombol triger -->
          <!-- Komponen navbar -->
        <a class="brand" href="#">Title</a>
                          <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav">
                              <li class="active"><a href="#">Home</a></li>
                              <li><a href="#">Link</a></li>
                              <li><a href="#">Link</a></li>
                            </ul>
                           </div><!-- nav collapse -->
        </div>                          
        </div><!-- navbar inner -->
</div>  
</div>
</div> 

  <script src="js/jquery.js"></script>
      <!-- Bootstrap javascript -->
  <script src="js/bootstrap.min.js"></script>
  • 4 Contributors
  • 8 Replies
  • 603 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by Mohandas1985

Dani AI

Generated

Short summary: the thread's HTML uses the Bootstrap 2 navbar structure (elements like .navbar-inner, .btn-navbar, .brand), so rules written for Bootstrap 3 (for example .navbar-default) will not match. In Bootstrap 2 the visual background sits on the inner navbar element and the inner .container limits width, so placing a background on that .container won't recolor the whole bar. (getbootstrap.com)

Browser developer tools are the fastest way to find which rule creates the grey area: open the Elements/Styles panel, select the navbar node, and check the Computed styles to see which selector and file set background or background-image. This was the same advice from . The Styles pane also allows trying changes live before saving them. (developer.chrome.com)

A minimal, safe fix is to override the Bootstrap 2 selector that actually paints the bar and remove any gradient/background-image. Place the override in a small custom stylesheet that is loaded after Bootstrap (do not edit the core bootstrap file unless intentionally for a fork). Example override (new code; put in custom.css loaded after bootstrap):

/* custom.css (loaded after bootstrap) */
.navbar .navbar-inner {
  background-color: #8B5A2B;     /* chosen brown */
  background-image: none;        /* remove default gradient */
  border: 0;
}

.navbar .brand,
.navbar .nav > li > a {
  color: #ffffff;
}

Because stylesheet order and selector specificity determine which rule applies, ensure the override file is loaded after bootstrap and prefer a more specific selector over !important. Use !important only as a last resort; it alters the cascade and makes future debugging harder (note: ’s .navbar-default tip applies to Bootstrap 3 and ’s suggestion to edit the compiled file will work but is brittle for upgrades—overrides or rebuilding from source variables is preferable). (mdn2.netlify.app)

Recommended Answers

All 8 Replies

Member Avatar for gentlemedia

The grey background color is set in the bootstrap stylesheets linked at the top and is probably set to another element then div 'container'.

My advise is not to set CSS styles in the HTML tags (inline CSS), but use an external stylesheet.
The bootstrap.min.css is minified, so if the background color is set in this stylesheet, you will have to unminify the stylesheet first in order to edit it.

You can also override it in custom.css, but then you have to first look with the browsers' inbuild developer tools (right mouse click --> inspect element) on which element the grey background color is set.

Edited by gentlemedia
Member Avatar for davy_yg

How to unminify the stylesheet?

I have successfully change the text color, yet have not been able to change the background-color.

custom.css

.navbar{background-color: #AE5959;}

.navbar .brand{color: brown;}

.navbar .nav > .active > a{color: brown;}

.navbar .nav > li > a{color: brown;}
Member Avatar for gentlemedia

How to unminify the stylesheet?

http://unminify.com/ Paste the minified CSS and click button 'unminify'.

Member Avatar for mattster

Add this somewhere in your stylesheet, or find it in the bootstrap CSS file (usually line 5 of bootstrap.min.css) and change it there.

.navbar-default {
    background-color: #f8f8f8 !important;
    border-color: #e7e7e7 !important;
}
Member Avatar for gentlemedia

Not sure why the link to the unminify tool gets a strikethrough and a message that it is a broken link.
It's a working link, so just follow it if you want to unminify!

Member Avatar for davy_yg

Still remains the same.

custom.css

.navbar{background-color: #AE5959;}

.navbar .brand{color: brown;}

.navbar .nav > .active > a{color: brown; background-color: #AE5959; }

.navbar .nav > .active > a:hover{color: brown; background-color: #AE5959; }

.navbar .nav > li > a{color: brown;}

.navbar-default {
   background-color: #f8f8f8 !important;
   border-color: #e7e7e7 !important;
}
Member Avatar for gentlemedia

Well, I don't see a class 'navbar-default' assigned to the mark-up of that nav, so it's obvious it's not dong anything.

Use the browser developer tools to investigate (in the CSS panel) on which element the grey background-colour is set. Otherwise upload everything to a web server and give us a link, so we can investigate for you.

Member Avatar for Mohandas1985

You can simply edit the bootstrap file after the code in stylesheet.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.