1

I'm setting up a WP-page for a client. I have a dropdown menu and the primary menu item is an unclickable link that says "MENU". On every subpage, I need the title of the subpage to display where it usually (only on the startpage) says "MENU".

I've been able to accomplish this with this code that my theme support helped me with:

(function($){
  var title = '';
  $('.menu-item').each(function(){
    if( $(this).hasClass('current-menu-item')){
      title = $(this).find('span').text();
    }
  });
  if(title){
   $("#menu-item-36 > a span").text(title);
    console.log(title);
  }
})(jQuery);

#menu-item-36 is the ID for the primary menu item - "MENU".

The problem is that I also need the pages to load smoothly without reloading the header on every page. So I'm using a plugin called Ajaxify Pro that works great for doing this, BUT Ajaxify removes the class 'current-menu-item' from the active menu item, so my code doesn't work any longer.

Is there a way around this? The active/current menu item in the submenu doesn't get any class different from the other items in the menu, so I'm twisting my head around a way to solve this.

Any help would be much appreciated!

Here you can see the page with Ajaxify activated and the code not working: http://test.frankochrakel.se/

Emy O. W
  • 31
  • 3

1 Answers1

0

As I see the menu always has the ID of menu-item-36 is it your ID ?

Anyway as I see the selected menu has a current_page_item class, so just find it like that:

(function($){
  var title = '';
  title = $('#menu-item-36').find('.current_page_item').text()
  if(title) {
   $("#menu-item-36 > a span").text(title);
    console.log(title);
  }
})(jQuery);
Danpe
  • 18,668
  • 21
  • 96
  • 131
  • Thank you! Correct, the menu always had the ID `menu-item-36`. Unfortunately the subpage title now displays twice on top of the menu: http://test.frankochrakel.se/ – Emy O. W Jun 01 '15 at 13:43
  • Can't see it actually, can you try uploading only the relevant code to [JSFiddle](http://jsfiddle.net/) ? – Danpe Jun 01 '15 at 13:47
  • I updated the code, but it only works if you reload the subpage. For example: http://test.frankochrakel.se/?page_id=39 . Anyway, added the code here: http://jsfiddle.net/36kh4czq/ – Emy O. W Jun 01 '15 at 14:15
  • @EmyO.W Yes, You'll need to run this function everytime ajaxify is loading a new page, Maybe ajaxify exposes such an event ? If not try using [jQuery Detect HTML Change](http://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div) – Danpe Jun 01 '15 at 14:30