CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2044139
user2044139

Reputation:

replace nav bar with back ground color

I am using the twitter bootstrap to develop a responsive website....
When I reduce the browser window the navigation bar collapses....
But in the collapsed nav bar i need to show background color....
But it shows background image. How to replace it with background-color: #14486b;
I am not sure from where does this back ground image coming up

<div class="nav-collapse in collapse" style="height: auto;">
            <ul class="nav">
              <li class="active"><a href="/docs/examples/product.html">Product</a></li>
              <li><a href="/docs/examples/solution.html">Solutions</a></li>
              <li><a href="/docs/examples/service.html">Services</a></li>
              <li class="iphonePartnerLink"><a href="/docs/examples/partner.html">Partners</a></li>
              <li class="iphoneContactLink"><a href="/docs/examples/contact.html">Contact</a></li>
            </ul>

            <ul class="nav" id="navSecond">
              <li class=""><a href="/docs/examples/partners.html">Partners</a></li>
              <li><a href="/docs/examples/contact.html">Contact</a></li>
            </ul>
            <form class="navbar-form pull-right">
              <input class="span2" type="text" placeholder="Email">
              <input class="span2" type="password" placeholder="Password">
              <button type="submit" class="btn">Sign in</button>
            </form>
          </div>

Upvotes: 0

Views: 124

Answers (2)

Shail
Shail

Reputation: 3649

You will have to replace the image by the background color using media queries :

 @media (min-width: 768px) and (max-width: 979px) {

         .navbar-inner{
                 background-image: url("http://www.defie.co/designerImages/bg_bar.png");/*remove this */
                 background-color:#14486b;
               }

           }

 /* Landscape phone to portrait tablet */
  @media (max-width: 767px) {

           .navbar-inner{
                 background-image: url("http://www.defie.co/designerImages/bg_bar.png");
                 background-color:#14486b;
               }
        }

 /* Landscape phones and down */
  @media (max-width: 480px) {

             .navbar-inner{
                 background-image: url("http://www.defie.co/designerImages/bg_bar.png");
                 background-color:#14486b;
               }
        }

If you want to fix the navbar on top:

.navbar {
 left: 0;
 position: absolute;/*remove this line if you want to fix it */
 right: 0;
 top: 0;
  }

Edit After comment : YOu have set your background-image to none in media queries and the color is commented out like this:

@media (max-width:980px){
         .navbar-inverse .navbar-inner{
          background-image: none;
          /*background-color: red;*/
        }
       }
@media (max-width: 767px) {
     .navbar-inverse .navbar-inner {
  background-image: none;
    /*background-color: red;*/
     }
    }

    @media (max-width: 480px) {
      .navbar-inverse .navbar-inner{
          background-image: none;
          /*background-color: red;*/
        }
      }

Please replace the styles with the one I mentioned above.

Upvotes: 0

Seb
Seb

Reputation: 313

Try to analyze, where the image is coming from. Good tools to do so are Firebug for Firefox https://addons.mozilla.org/de/firefox/addon/firebug/ or the development tools of Chrome (Press F12 in Chrome to open it). In both tools you can inspect single componentens of the DOM tree an see all attached CSS styles (and its source).

If the reason is a background-image you can overwrite the style in the following way:

#idOfComponent {
    background-image:none
}

Upvotes: 0

Related Questions