My own menu doesn't change the pages
Hello Armin,
I tailored my own menu on a "Lay"-installation to support a dropdown-sub-menu. I hijacked the original styles and everything worked pretty nice except for one big problem: the menu doesn't navigate to the different pages on the the site! I guess it is some AJAX-problem and I'm missing something. Could you please have a look and help me with that?
My development site is here: http://laboratorium-haus1.de/wp/
Thank you and best regards,
Arne
UPDATE:
I have managed to make the menu actually change my pages.
This did the trick:
add_filter( 'nav_menu_link_attributes', 'cfw_add_data_atts_to_nav', 10, 4 );
function cfw_add_data_atts_to_nav( $atts, $item, $args ) {
$atts['data-id'] = $item->object_id;
$atts['data-title'] = $item->title;
$atts['data-type'] = $item->object;
return $atts;
}
But it still doesn't update the current page classes. So still the wrong pages get highlighted when I navigate via the menu. Hmmm…
Hey, yeah u're smart. Your changes will disappear when you update lay theme cause u changed some php code of the theme. :D
Hm I think you need to use some js to add the class "current-menu-item" to the li's of the submenu points once a new page has loaded.
Maybe something like this, haven't tested this though:
<script>
Frontend.module("GlobalEvents").on('projectpageshown', function(){
var id = jQuery("body").attr('data-id');
var type = jQuery("body").attr('data-type');
jQuery(".current-menu-item").removeClass("current-menu-item");
jQuery('nav a[data-type="'+type+'"][data-id="'+id+'"]').parentNode().addClass("current-menu-item");
});
</script>
Armin, I know about the updates. I made most of the changes in a child-theme and will transfer the rest of the edits to my child theme as well. That is a common technique so it should work out alright.
Thanks for your help – I will test that today.
Hello Armin,
I am working with a friend who us a developer as well but we can't get your code to work. We tried our own but with no real solution:
<script>
jQuery("nav li a").on('click', function(){
var id = jQuery("body").attr('data-id');
var type = jQuery("body").attr('data-type');
console.log(id);
jQuery(".current-menu-item").removeClass("current-menu-item");
jQuery('nav a[data-type="'+type+'"][data-id="'+id+'"]').parent().addClass("current-menu-item");
});
</script>
The result can be seen here: http://laboratorium-haus1.de/wp
Any idea how to modify the script/your script to make the changes of the highlights possible?
Thank you!
Ah Ok, I thought it wasn't possible to make a child theme with lay theme.
Yeah about your code. Maybe try a timeout. Put all of that code "var id = jQuery("body").attr('data-id');
var type = jQuery("body").attr('data-type');
console.log(id);
jQuery(".current-menu-item").removeClass("current-menu-item");
jQuery('nav a[data-type="'+type+'"][data-id="'+id+'"]').parent().addClass("current-menu-item");" in a timeout.
Thank you! I will investigate this if necessary.
As for now we found a work-around: we use "category" for the artists. That way the menu works almost perfectly. See here: http://laboratorium-haus1.de/wp/
The sole open question/problem now is how to highlight the individual artists in their different projects as there is no hierachy that one could style when loading the pages through the menu. Any idea is appreciated – if there is no solution we'll just go without that highlight…
And yes: child themes are possible. I didn't manage to change everything by my own files since some files are loaded after the child theme files and will make custom changes go away but well…
Cheers, Arne
Hmm hmm, I would have to take a close look and like code that for you so it would work. But I don't really have time for that right now cause I got some deadlines ahead of me for some freelance work.
I think its pretty amazing how much you have customized lay theme!
Hey, maybe this helps. Since the update 1.056 today, there are better javascript events that you can use: