Title: CSS bootstrap navbar overriding colors for text/links of login drop down
Tags: html;css;twitter-bootstrap
Question: So I have a website I'm working on, and I chose to use bootstrap to assist in the styling. The problem I have is that now I'm trying to add a drop down login form to the navbar links and it seems as though bootstrap is overriding my color settings for the text/links. For example, this allows the drop down to pop up and everything shows up correct except the "Forgot your password" and the "Register" part. The rest shows up fine, but for some reason in the css under the 
 .navbar-nav li a:hover, .navbar-nav li.active a  part the color set for that shows as the color for when I hover over those to links. Otherwise it shows up as white which is another part of the navbar css for my font color. I dont understand why it wont recognize the dropdown styling.

Ill paste the css and code below. 



```.navbar {
  background-color: blue;
  z-index: 9999;
  border: 0;
  font-size: 12px;
  line-height: 1.42857143;
  letter-spacing: 4px;
}
.navbar li a,
.navbar .navbar-brand {
  color: #fff !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: #000000 !important;
  background-color: #fff !important;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}
.navbar .form-group {
  color: black;
}
#login-dp {
  min-width: 250px;
  padding: 14px 14px 0;
  overflow: hidden;
  background-color: #ffffff;
}
#login-dp .help-block {
  font-size: 12px;
  color: black !important;
}
#login-dp .bottom {
  background-color: rgba(255, 255, 255, .8);
  border-top: 1px solid #ddd;
  clear: both;
  padding: 14px;
  color: black;
}
#login-dp a:link {
  color: black;
}
#login-dp .social-buttons {
  margin: 12px 0
}
#login-dp .social-buttons a {
  width: 49%;
}
#login-dp .form-group {
  margin-bottom: 10px;
  color: black;
}
.btn-fb {
  color: #fff;
  background-color: #3b5998;
}
.btn-fb:hover {
  color: #fff;
  background-color: #496ebc
}
.btn-tw {
  color: #fff;
  background-color: #55acee;
}
.btn-tw:hover {
  color: #fff;
  background-color: #59b5fa;
}
@media(max-width:768px) {
  #login-dp {
    background-color: inherit;
    color: #000000;
  }
  #login-dp .bottom {
    background-color: inherit;
    border-top: 0 none;
    color: black;
  }
}```
```<nav class="navbar navbar-default navbar-fixed-top"&gt;
  <div class="container"&gt;
    <div class="navbar-header"&gt;
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
        <span class="icon-bar"&gt;</span&gt;
        <span class="icon-bar"&gt;</span&gt;
        <span class="icon-bar"&gt;</span&gt;
      </button&gt;
      <a class="navbar-brand" href="index.php"&gt;Logo</a&gt;
    </div&gt;
    <div class="collapse navbar-collapse" id="myNavbar"&gt;
      <ul class="nav navbar-nav navbar-right"&gt;
        <li&gt;<a href="aboutus.php"&gt;ABOUT</a&gt;
        </li&gt;
        <li&gt;<a href="services.php"&gt;SERVICES</a&gt;
        </li&gt;
        <li&gt;<a href="portfolio.php"&gt;PORTFOLIO</a&gt;
        </li&gt;
        <li&gt;<a href="order.php"&gt;ORDER</a&gt;
        </li&gt;
        <li&gt;<a href="contactus.php"&gt;CONTACT</a&gt;
        </li&gt;
        <li class="dropdown"&gt;
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;<b&gt;LOGIN</b&gt;</a&gt;
          <ul id="login-dp" class="dropdown-menu"&gt;
            <li&gt;
              <div class="row"&gt;
                <div class="col-md-12"&gt;
                  <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"&gt;
                    <div class="form-group"&gt;
                      <label class="sr-only" for="exampleInputEmail2"&gt;Email address</label&gt;
                      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required&gt;
                    </div&gt;
                    <div class="form-group"&gt;
                      <label class="sr-only" for="exampleInputPassword2"&gt;Password</label&gt;
                      <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required&gt;
                      <div id="help-block text-right"&gt;<a href=""&gt;Forgot your password?</a&gt;
                      </div&gt;
                    </div&gt;
                    <div class="form-group"&gt;
                      <button type="submit" class="btn btn-primary btn-block"&gt;Sign in</button&gt;
                    </div&gt;
                  </form&gt;
                </div&gt;
                <div class="bottom text-center"&gt;
                  New here? <a href="register.php"&gt;Register</a&gt;
                </div&gt;
              </div&gt;
            </li&gt;
          </ul&gt;
        </li&gt;

      </ul&gt;
    </div&gt;
  </div&gt;
</nav&gt;```






Here is another answer: Is this what you want?

```.navbar li a, .navbar .navbar-brand {
  color: #fff !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
  color: #000000 !important;
  background-color: #fff !important;
}

To:

.navbar .nav&gt;li&gt;a, .navbar .navbar-brand {
  color: #fff !important;
}


.navbar-nav li a:hover, .navbar-nav li.open a {
  color: #000000 !important;
  background-color: #fff !important;
}
```

Comment for this answer: not quite i dont think. My issue isnt the navbar colors specifically. The navbar css is perfect to my knowledge. The issue is that it overrides the css for the dropdown form.

Here is another answer: It looks like the issue is you're using an ID for your help-text when it should be a class:

```id="help-block text-right"``` should be ```class="help-block text-right"``` (though I used ```text-center``` in my example for consistency).

Also, you shouldn't need to use !important for any of this, just use a stronger selector and I doubt you need the form inside of any row/column format.

Hopefully this helps.

Working Example:



```.navbar.navbar-default {
  background-color: blue;
  z-index: 9999;
  border: 0;
  font-size: 12px;
  line-height: 1.42857143;
  letter-spacing: 4px;
}
.navbar.navbar-default .navbar-nav &gt; li &gt; a,
.navbar.navbar-default .navbar-brand {
  color: #fff;
}
.navbar.navbar-default .navbar-nav &gt; li &gt; a:hover,
.navbar.navbar-default .navbar-nav &gt; li.active &gt; a {
  color: #000000;
  background-color: #fff;
}
.navbar.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff;
}
.navbar.navbar-default .form-group {
  color: black;
}
.navbar.navbar-default #login-dp {
  min-width: 250px;
  padding: 14px 14px 0;
  overflow: hidden;
  background-color: #ffffff;
}
.navbar #login-dp .help-block {
  font-size: 12px;
  color: black;
}```
```<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
<nav class="navbar navbar-default navbar-fixed-top"&gt;
  <div class="container"&gt;

    <div class="navbar-header"&gt;
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"&gt;
        <span class="icon-bar"&gt;</span&gt;
        <span class="icon-bar"&gt;</span&gt;
        <span class="icon-bar"&gt;</span&gt;
      </button&gt;
      <a class="navbar-brand" href="index.php"&gt;Logo</a&gt;
    </div&gt;

    <div class="collapse navbar-collapse" id="myNavbar"&gt;
      <ul class="nav navbar-nav navbar-right"&gt;
        <li class="active"&gt;<a href="aboutus.php"&gt;ABOUT</a&gt;
        </li&gt;
        <li&gt;<a href="services.php"&gt;SERVICES</a&gt;
        </li&gt;
        <li&gt;<a href="portfolio.php"&gt;PORTFOLIO</a&gt;
        </li&gt;
        <li&gt;<a href="order.php"&gt;ORDER</a&gt;
        </li&gt;
        <li&gt;<a href="contactus.php"&gt;CONTACT</a&gt;
        </li&gt;
        <li class="dropdown"&gt;
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;<b&gt;LOGIN</b&gt;</a&gt;
          <ul id="login-dp" class="dropdown-menu"&gt;
            <li&gt;

              <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"&gt;

                <div class="form-group"&gt;
                  <label class="sr-only" for="exampleInputEmail2"&gt;Email address</label&gt;
                  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required&gt;
                </div&gt;

                <div class="form-group"&gt;
                  <label class="sr-only" for="exampleInputPassword2"&gt;Password</label&gt;
                  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required&gt;
                  <div class="help-block text-center"&gt;<a href=""&gt;Forgot your password?</a&gt;
                  </div&gt;
                </div&gt;

                <div class="form-group"&gt;
                  <button type="submit" class="btn btn-primary btn-block"&gt;Sign in</button&gt;
                </div&gt;

              </form&gt;

              <div class="form-group"&gt;
                <div class="text-center"&gt;
                  New here? <a href="register.php"&gt;Register</a&gt;
                </div&gt;
              </div&gt;

            </li&gt;
          </ul&gt;
        </li&gt;
      </ul&gt;
    </div&gt;

  </div&gt;
</nav&gt;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;</script&gt;
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;</script&gt;```





Here is another answer: Try to include bootstrap CSS before your own CSS like so:

```<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"&gt;
<link rel="stylesheet" type="text/css" href="css/YOUR CSS FILE.css"&gt;
```

Including your CSS like this means that bootstrap CSS get executed first. After that it applies your CSS which means that your CSS will be leading.

Comment for this answer: Allright. Try to check your console (right-click in browser > inspect) Maybe you can see there why your css is overwritten. If that does not work, try make a jsfiddle and see if you can reproduce your errors there
Comment for this answer: I did it but it didnt work. Thanks for that information though I had forgotten about that entirely.
Comment for this answer: im not sure i know how to do that jsfiddle thing, or if it would work. If it requires any javascript theres none in the site. I went to console but theres nothing going on in it.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:06/30/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><twitter-bootstrap>', 'Title': 'CSS bootstrap navbar overriding colors for text/links of login drop down', 'ViewCount': 1002, 'id': 38119119, 'user_AboutMe': '', 'user_AccountId': 8733192.0, 'user_DisplayName': 'nessj1994', 'user_Reputation': 36.0, 'user_Views': 10.0, 'user_id': 6532589.0}}