CODEWITHSUNDEEP
csstwitter-bootstrap
user1554264
user1554264

Reputation: 1224

Changing the colour of a glyphicon using CSS in the collapsed navbar component

I am having an issue on the following website: http://www.bestdiscointown.co.uk/

In order to view the issue please resize the website vertically so that the small collapsed navbar appears.

In the HTML that forms the small button component in the navbar on mobile viewports there are 3 <span> elements with the class .icon-bar. I am trying to style the hover and focus states with CSS in order so that the colour of the bar icons are blue.

   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

Bootstrap sets a default colour value of:

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #FFFFFF;
}

I dont understand why my CSS rule isn't styling the focus and active states for the bar icons to be blue as shown below, it could possibly be a CSS specificity issue:

.navbar-inverse .navbar-toggle .icon-bar:hover, .navbar-inverse .navbar-toggle .icon-bar:focus {
  color: #5979CD;
}

enter image description here

Upvotes: 0

Views: 2222

Answers (2)

Marius Stănescu
Marius Stănescu

Reputation: 3761

If you want the icon-bar elements to be a diiferent color, when you hover over the button, then the hover and focus rules should be on the button like so:

.navbar-inverse .navbar-toggle:hover .icon-bar,
.navbar-inverse .navbar-toggle:focus .icon-bar
{
    background-color: #5979CD;
}

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115279

I think it's in your styles.css (line 75) which is overriding bootstrap

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
  background-color: #FFF;
}

Upvotes: 0

Related Questions