Navigation Button Outline Scroll Issue

[a096399]

Hey Guys,

I am having an issue with my navigation button black borders on my website birdswebs.com. The appear fine on initial page load with their black borders, and as intended, when I scroll down on the website the black outlines change to different navigation items letting the user know which section in the navigation they are on. NOW, the problem I am having is after you have scrolled down and then decide to scroll all of the way to the very top, the black outlines around the navigation buttons are gone and the text is not black like it was initially. I have included screenshots of what I’m talking about. Please help me get the navigation buttons back to black and outline in black when the user scrolls back up to the page! Thanks in advance!

[basanta]

Hi @a096399,

Thanks for writing in!

Can you please add this CSS to your theme Option -> CSS and let us know if that works.

.x-navbar-static-active .x-navbar .desktop .x-nav>li>a>span, 
.x-navbar-fixed-top-active .x-navbar .desktop .x-nav>li>a>span {
color: #000;
border-color: #000;
}

Hope this helps!

[a096399]

Hi! Thanks for your quick response! I applied the code and all boxes do now outline in black. BUT now when you scroll down the website, the black outlines around the navigation buttons no longer transition and highlight when a section anchor is reached, letting the user know which section they are on on the page. Please help! Thanks!

[a096399]

To Show you more of what I am talking about I have attached an image of 3 screenshots. The first 2 screenshots are perfect… the 3rd screenshot is the problem. Its when the user scrolls back up to the top of the website when the black navigation buttons with the black outline change and stay grey. I want the navigation links re-activated to black text with the black outline when the user scrolls all the way back up to the top of my website. Thanks!!!

[nabeel]

Hi again,

Thank you for the screenshots. To fix the issue, try adding the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	var reset_position = $('.x-logobar').outerHeight();
	$(window).scroll(function(){
		if ($(this).scrollTop() <= reset_position) {
			$('.x-nav-wrap.desktop > ul > li').addClass("current-menu-item");
		}
	});
});

Now when you scroll back up to the top, your menu items will show the borders just like on initial load. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[a096399]

Works great! Thanks!!!

[paul.r]

You’re welcome!