twitter bootstrap navbar customization beginner query

Question

This is my navbar code :

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="sampale.html"><font color="#125EAA">Downloads</font></a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="https://example.com">Browser</a></li>
            </ul>
                <div class="btn-group">
                      <a class="btn dropdown-toggle btn-primary" data-toggle="dropdown" href="#">
                        Guides
                        <span class="caret"></span>
                      </a>
                      <ul class="dropdown-menu">
                        <!-- dropdown menu links -->
                        <li><a href="https://example.com/sample.htm">User Guide 1</a></li>
                        <li><a href="https://example.com/sample.htm">Option 2</a></li>
                      </ul>
                </div> <!-- dropdown -->

                <div class="btn-group">
                      <a class="btn dropdown-toggle btn-primary" data-toggle="dropdown" href="#">

                        <span class="caret"></span>
                      </a>

and this is my css file ( custom.css )

.navbar-inverse .navbar-inner {

                 background-color: #FFDD00; /* fallback color, place your own */
                 background-image: none;
                 background-repeat: no-repeat;
                 filter: none;
              }

Result is :

In the code portion Browser

Browser

the background of the Browser portion still shows the default color ( black ) but I want it to show the background-color of yellow (#FFDD00).Can we fix that part ?

Also , can we edit the btn-primary class in css . I want to change the color of the button.

I had these 2 questions. Any help greatly appreciated ! danke!

possible duplicate of [navbar color in Twitter Bootstrap](http://stackoverflow.com/questions/9869610/navbar-color-in-twitter-bootstrap)- you also asked this yesterday: http://stackoverflow.com/questions/17661211/bootstrap-custom-css-file — Carol Skelly, Jul 16 '13 at 19:18
do you mean the body shows black? if thats the cause just set body{background: #FFDD000;} — Parker Hutchinson, Jul 16 '13 at 19:18
@ParkerHutchinson - no sir, I don't want to make the body yellow , Just the navbar ! and in the browser part it's showing the Browser part as black ! — thestralFeather7, Jul 16 '13 at 19:32

score 2 · Accepted Answer · answered Jul 16 '13 at 19:17

2

For your first question use:

background-color: #FFDD00 !important;

For your second use:

.btn-primary {
    background-color: red;
}

answered Jul 16 '13 at 19:17

the background color part goes part of .navbar-inverse .navbar-inner ? – thestralFeather7 Jul 16 '13 at 19:27
for the btn-primary part , i can see the background-color of the button red ( I can faintly make it out ) ! But the button color remains unchanged ! I want the button color to change! Also , regarding the 1st input , I had already used it inside the navbar part if u can see the question. But it doesn't work =/ – thestralFeather7 Jul 16 '13 at 19:29
Have you put in the external css files – Jul 16 '13 at 19:39
I didn't put all my codes though should I ? Becoz , i don't know if it can handle twitter bootstrap elements . but I updated it now ! – thestralFeather7 Jul 16 '13 at 19:39
Found the issue there was a background-image as well here is a working fiddle http://jsfiddle.net/Hive7/CscBP/5/ – Jul 16 '13 at 19:42
ok ! so I am seeing u just added !important to the css file ? – thestralFeather7 Jul 16 '13 at 19:44
yep plus you need the `background-image: none !important;` – Jul 16 '13 at 19:44
i added those to my css file but it still didn't change anything :( – thestralFeather7 Jul 16 '13 at 19:46
Have you looked at the fiddle – Jul 16 '13 at 19:47
If you wan the border on the bottom back remove `border-bottom: none !important` – Jul 16 '13 at 19:54
Please can you accept as I have done what you asked and possibly upvote as I did to you – Jul 16 '13 at 20:02

twitter bootstrap navbar customization beginner query

1 Answers1