Hi,
When I click on the directions on the navigation bar, the first direction is highlighted no matter which direction I click. When I inspected the element on the browser I saw that highlight function is not switching between the directions that are clicked. I think the problem is related with JS. The website is : www.aky-tech.com
Hi There,
Can you confirm that you are fully updated? (Theme and Plugins)
You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.
If you find anything to be out of date, you can review our update guide.
I have updated Cornerstone and I have no other plugin. Problem is not fixed yet. Is there anything else you can suggest?
Hi there,
Also, kindly update the theme to version 5.2.2 regarding this.
Also, I wonder if you followed the instructions mentioned in the article below:
Thank you.
I have updated the theme now thx! Unfortunately problem is not fixed. I have created my navigation bar by using Cornerstone. Just gave the ID numbers the rows that I need and then added those IDs to new menu (Not the primary menu). My navigation is working perfectly but the problem is as a mentioned before the highlight on the selected menu tab. It always highlights the first tab on the menu bar even after I clicked to another tab.
Hi again,
Can you please try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global Javascript
jQuery(document).ready(function($){
$('.x-nav li').each(function(){
$(this).removeClass('current-menu-item');
});
$('.x-nav li').click(function(){
$('.x-nav li').each(function(){
$(this).removeClass('current-menu-item');
});
$(this).addClass('current-menu-item');
});
});
Hope this helps!
Hi,
This helped very much but still there are some problem. When I first enter the site, no matter which tab I choose it highlights the first tab. Then I clicked the tab second time it is fixed. Another problem is that when I return back to the top of the site the tabs are still highlighted even if I don’t click anywhere. Thank you.
Hi again,
Can you please try replacing the previous code with this:
jQuery(document).ready(function($){
$('.x-nav li').each(function(){
$(this).removeClass('current-menu-item');
});
$('.x-nav li').click(function(){
setTimeout( function() {
$('.x-nav li').each(function(){
$(this).removeClass('current-menu-item');
});
$(this).addClass('current-menu-item');
},100 );
});
});
Let us know how this goes!
Hi,
This was very helpful.However, when I first enter the website , after I click second tab it still highlights the first tab and it is fixed at the second click so It only happens in the first try. Thank you for your effort
Hi again,
It looks like the one page navigation setup issue make sure you’ve activated and selected a menu in Cornerstone’s One Page Navigation setting but remove the custom code first provided earlier. If this doesn’t resolve the issue then replace the previous code with the following:
jQuery(document).ready(function($) {
/**
* This part handles the highlighting functionality.
* We use the scroll functionality again, some array creation and
* manipulation, class adding and class removing, and conditional testing
*/
var aChildren = $("nav li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i=0; i < aChildren.length; i++) {
var aChild = aChildren[i];
var ahref = $(aChild).attr('href');
aArray.push(ahref);
//alert(ahref);
} // this for loop fills the aArray with attribute href values
$(window).scroll(function(){
var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
var windowHeight = $(window).height(); // get the height of the window
var docHeight = $(document).height();
for (var i=0; i < aArray.length; i++) {
var theID = aArray[i];
var divPos = $(theID).offset().top;// get the offset of the div from the top of page
divPos = divPos - 135; // fix for header hight and padding. In our case 90px+45px
var divHeight = $(theID).height(); // get the height of the div in question
divHeight = divHeight +90;// correction for our previous fix so that end of div is calculated properly. This is height of fixed header
if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
$("a[href='" + theID + "']").parent().addClass("current-menu-item");
} else {
$("a[href='" + theID + "']").parent().removeClass("current-menu-item");
}
}
});
});
Let us know how this goes!
Hi,
Thank you, this worked very well! I will inform you if I can find any problem but so far so good 
Glad it worked.
Cheers!