Pangu Pangu - 5 months ago 11
CSS Question

Bootstrap: Navbar Item Stuck on Active State After Scrolling To Another Item?

I'm new to javascript and learning using a bootstrap template. The problem I'm having is that in my navigation bar, if I click on an item, then start scrolling, that item still remains active even though I've scrolled to another item as seen here:

enter image description here

If I clicked on About, then scroll to Portfolio, About still remains Active.

I'm not sure the relevant code needed to assist me, so please let me know what else I need to provide, but based on looking, I noticed these codes in my main.css:

.navbar-default a.navbar-brand:link, .navbar-default a.navbar-brand:visited
{
color: #fff;
}

.navbar-default a.navbar-brand:hover, .navbar-default a.navbar-brand:active
{
color: #12bebd;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active,
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav>.active > a:focus
{
color: #12bebd;
background: none;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
transition: color 0.5s;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus
{
background-color: #12bebd;
}


I also noticed in the provided jquery.nav.js:

//Handle clicks on the nav
self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));

...

handleClick: function(e) {
var self = this;
var $link = $(e.currentTarget);
var $parent = $link.parent();
var newLoc = '#' + self.getHash($link);

if(!$parent.hasClass(self.config.currentClass)) {
//Start callback
if(self.config.begin) {
self.config.begin();
}

//Change the highlighted nav item
self.adjustNav(self, $parent);

//Removing the auto-adjust on scroll
self.unbindInterval();

//Scroll to the correct position
$.scrollTo(newLoc, self.config.scrollSpeed, {
axis: 'y',
easing: self.config.easing,
offset: {
top: -self.config.scrollOffset
},
onAfter: function() {
//Do we need to change the hash?
if(self.config.changeHash) {
window.location.hash = newLoc;
}

//Add the auto-adjust on scroll back in
self.bindInterval();

//End callback
if(self.config.end) {
self.config.end();
}
}
});
}

e.preventDefault();
},


If I comment out
self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));
, the item becomes inactive when I scroll away, but I dont get that scrolling animation effect.

I'm sure it's fairly simple, but I just started learning and would appreciate the help.

Can someone point me in the right direction to resolve this or where to look in my code?

Thanks

Answer

Just remove navbar-default .navbar-nav > li > a:focus, from this part of your CSS:

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active,
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav>.active > a:focus
{
    color: #12bebd;
    background: none;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    transition: color 0.5s;
}

and add as independed part of code (new property & value):

.navbar-default .navbar-nav > li > a:focus {
   color: #fff;
}
Comments