0

I'm using the Twenty Fourteen theme and I'm loading the pages using Ajax.

What I want to happen - the menu bar to unfocus the previous page on the navigation bar and highlight the current page.

What is actually happening -

Nothing, it just stays the same.

My code:

// highlight the current menu item
jQuery('ul.menu li').each(function() {
    jQuery(this).removeClass('current-menu-item');
});
jQuery(thiss).parents('li').addClass('current-menu-item');

I have also tried this

jQuery('ul.menu li').each(function() {
jQuery(this).removeClass('current-menu-item');
jQuery(this).removeClass('current_page_item');
});
jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');

The Navigation bar should be setup as it would be in a stock WP install as I'm using the default theme

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">

The CSS file contains this

.site-navigation li .current_page_item > a,
.site-navigation li .current_page_ancestor > a,
.site-navigation li .current-menu-item > a,
.site-navigation li .current-menu-ancestor > a 

So the JS does appear to be using the correct call.

Is there an alternative way I can try to make this work? I have another JS script which toggles the navigation bar when the button is viewable (mobile) which is executing correctly.

EDIT: After suggestions in this question I've also tried this code

jQuery('ul.menu li').each(function() {
jQuery(this).removeClass('current-menu-item');
    jQuery(this).removeClass('current_page_item');
    jQuery(this).removeClass('current_page_ancestor')
    jQuery(this).removeClass('current_menu_ancestor')

});
jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');
  • Have you confirmed it is indeed removing the css classes and adding new ones elsewhere as desired? Also can you confirm that current-menu-item and current_page_item are what your CSS is styling? It sounds like your mobile css uses different style selectors to the desktop css. Also are these sub menus? Are the menu items related in any way? e.g. the 4th menu item is a child page of the 2nd? – Tom J Nowell Aug 15 '14 at 0:50
  • {@TomJNowell In the CSS it does have for the this. It also turns out that iPhone has the same result as desktop so it's just the one mobile browser half working. I've added the CSS to the main post that it should be dealing with. These aren't sub menus, they are all 'Top level' pages and this menu has been applied as 'Top Primary Menu'. Is there a way to possibly rewrite that JS to try this another way? – jblz Aug 15 '14 at 10:44
  • You're not handling the ancestors – Tom J Nowell Aug 15 '14 at 12:01
  • Can you post the javascript in full including the ajax and the click handler? – Tom J Nowell Aug 15 '14 at 14:09
0

You're removing the current menu item, and current menu page, however your CSS refers to these:

.site-navigation li .current_page_item > a,
.site-navigation li .current_page_ancestor > a,
.site-navigation li .current-menu-item > a,
.site-navigation li .current-menu-ancestor > a 

.current_page_ancestor and .current-menu-ancestor are not handled by your javascript, but they are styled, hence your problem. You will need to handle them to get this working.

How you would do that though, is a javascript/jquery question, not a WordPress question

Also:

jQuery(thiss).parents('li').addClass('current-menu-item');

do you mean thiss or this?

  • But it's not highlighting the new page at all. It just stays on the same page, surely all handling the ancestors would do would be remove the old one? I've updated the original question to show I've tried removing ancestors – jblz Aug 15 '14 at 13:30
  • see edit, eitherway you still need to handle the ancestor classes – Tom J Nowell Aug 15 '14 at 13:35
  • I've tried both 'this' and 'thiss' as I was originally using it from within a plugin that said to use thiss but nothing was firing correctly so this code is definitely 'being picked up'. Now I have other code inside the same area, outwith a plugin, that is firing correctly. Is there any way to rewrite that without using 'this' at all? I don't know JS – jblz Aug 15 '14 at 13:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.