(I use bootstrap 3.3.7 on this one)
Hi. I wanted to have the effect on my bootstrap navbar, that in wherever section the user is (I use tags on my One-Page site), the text in the navbar is highlighted automatically just by scrolling. I already set up the dropping anchor links...
So with this additional attributes to the body tag it's working great so far
<body data-spy="scroll" data-target=".navbar-collapse">
...but there is one Problem. I ONLY want the TEXT in the navbar to seem active, highlighted. But as you can see on the picture (upper example), there is this kinda box now around the highlighted navbar link. It came from nowhere. How can I get rid of it, so only the text color is a bit lighter when it's active? Look on the image here. The upper example is the problem now, and the bottom one is how I would like it, but with using scrollspy. So not that black box.
Greets and thanks a lot in advance my friends
You need to change the active state of the <a> tag to have a background of none. Bootstrap adds the class of active to the li containing the link when you scroll with scrollspy. So it would be something like the following:
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus{
background:none;
}
In the example above I included the hover and focus states as well but if you want to change those you can do on your own also by the colors in your image I am assuming that you are using navbar-inverse if you are using something else like navbar-default you will have to change that accordingly.