Bootstrap nav css

[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>

[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.

[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;}

[gentlemedia]

How to unminify the stylesheet?

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

[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;
}

[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!

[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;
}

[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.

[Mohandas1985]

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