Open-Canvas menu as breadcrumbs

Hi there,

so is this 'breadcrumb' to be displayed inside the off canvas panel?

Yes, David, on the inside of the off-convas panel. I think it would be great if users always knew: "Heck, where am I? Wait, hit the menu icon top-right and that tells me where I am. And while I'm in the menu I can go somewhere else!"

John

You're still going to need to create a breadcrumb - either using an SEO plugin, like Yoast or RankMath or a dedicated Breadcrumb plugin like NavXT

You can then add the php function or shortcode to the site using a Hook Element.
Example here for adding NavXT:

https://generatepress.com/forums/topic/how-can-i-make-breadcrumbs-visible-in-gp/#post-1101957

The hook for the Off Canvas Panel would be: generate_inside_slideout_navigation
This will place it above the menu in the off canvas

Thanks, David, for the very fast reply.

I was hoping it would be possible for the off-canvas menu to notice itself where the user was and then open to that topic + subtopic should the user click on the menu. That, however, would have to be a very, very smart off-canvas menu.

I'd rather not have any kind of breadcrumbs anywhere, not even above "Home" on the off-canvas menu.

Thanks, nonetheless, !

John

Aah - if you just want the current parent menus open to show the current page, then maybe this JS that Tom provides is what you need:

https://generatepress.com/forums/topic/css-bug-in-sider/#post-658074

Hi David,

Sorry for mis-describing the funtionality I am aiming for. And thanks for picking up on it so quickly.

Where do I place the JS from Tom ... under Additional CSS?

I tried, but got this error message: "Unable to save due to 1 invalid setting."

John

Nope all on me - didn't have my brain in gear lol.

The code is PHP - this article explains:

https://docs.generatepress.com/article/adding-php/

Alternative to adding PHP is you can use a Hook Element.
Add just the script to the element:

<script>
    jQuery( document ).ready( function($) {
        $( '.current-menu-ancestor' ).addClass( 'sfHover' ).find( '.sub-menu' ).addClass( 'toggled-on' );
    } );
</script>

And select the wp_head hook
And set the Display Rules > Locations to Entire Site

You're human, David, I love it !

I added the coding below which you had given me as a snippet, but it had no effect:

_______________

add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script( 'jquery' );
} );

add_action( 'wp_head', function() {
?>
<script>
jQuery( document ).ready( function($) {
$( '.current-menu-ancestor' ).addClass( 'sfHover' ).find( '.sub-menu' ).addClass( 'toggled-on' );
} );
</script>
<?php
}, 999 );

_______________

I suspect I got that wrong. Should I instead use a Hook element?

Try the Element method, and instead of using the wp_head hook, use the wp_footer hook. This should make sure the script fires after the menu items have loaded.

Yes, my mistake.

I just did try the Element method, but with wp_head, did not work. I'll try wp_footer.

Thanks, David.

No, wp_footer did not work. Is the code I should be using?

<script>
jQuery( document ).ready( function($) {
$( '.current-menu-ancestor' ).addClass( 'sfHover' ).find( '.sub-menu' ).addClass( 'toggled-on' );
} );
</script>

Odd... can you remove any code / elements you have and ill take a closer look and hopefully provide something that works!

I currently only have two hooks under Elements: ActiveCampaign, and this code that you gave me:

<script>
jQuery( document ).ready( function($) {
$( ‘.current-menu-ancestor’ ).addClass( ‘sfHover’ ).find( ‘.sub-menu’ ).addClass( ‘toggled-on’ );
} );
</script>

Should I remove both? Not a problem doing so.

You write: "I'll take a closer look and hopefully provide something that works!"

Do you have access to my backend? Do you need that access? Not a problem if you do?

Just remove that script ie.

<script>
jQuery( document ).ready( function($) {
$( ‘.current-menu-ancestor’ ).addClass( ‘sfHover’ ).find( ‘.sub-menu’ ).addClass( ‘toggled-on’ );
} );
</script>

Don't need access to backend