CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsass
Marcin Nabiałek
Marcin Nabiałek

Reputation: 111829

Navbar link color change on click

I'm using the latest version of Bootstrap 3.

Inside my navbar I have:

<div class="collapse navbar-collapse" id="topnav-navbar">
<ul class="nav navbar-nav navbar-right">
        <li><a href="http://localhost/anything">Text</a></li>
</ul>

I would like to change navbar background colour and link colour.

I've created the following Sass code (SCSS syntax).

.navbar {    
  background: #2C3E50;
  .navbar-nav li a {
    color: #eee;
    &:hover {
      color: #18BC9C;
    }
  }
}

It's working almost fine, but when I click on link (not on hover) for a split second I'm getting my link in gray colour with border/box shadow (on hover and on out everything looks as it should).

The question is - what class to use to remove border/shadow and use colour I defined? I've tried a while and achieved nothing. It's really hard for me to guess what class to use to achieve effect I want.

Upvotes: 1

Views: 16964

Answers (1)

AndrewL64
AndrewL64

Reputation: 16301

You need to include :focus and :active too like this:

.navbar {    
  background: #2C3E50;
  .navbar-nav li a {
    color: #eee;
    &:hover, &:focus, &:active {
      color: #18BC9C;
      background-color: transparent;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
    }
  }
}

Upvotes: 10

Related Questions