[Resolved] Open-Canvas menu as breadcrumbs

Home Forums Support [Resolved] Open-Canvas menu as breadcrumbs

Home Forums Support Open-Canvas menu as breadcrumbs

Viewing 15 posts - 1 through 15 (of 43 total)
  • Author
    Posts
  • #2038928
    John

    Hello Support at GP !

    I always begin a help request with praise of your work. Why? Yes, to motivate you to continue providing me with great support. But the bigger reason is that I think you folks are absolutely first-class: fast … problem always solved … polite … professional. Thank you !

    Ok, I have an open-canvas menu. My site, however – understand-culture.com – does not offer any kind of breadcrumb-function. I don’t like breadcrumbs. I find them necessary only if the design of site is either poor or overly complicated.

    I think it would be very helpful on my site to help users to know exactly where they are on the site. For now it should be rather easy. Just two countries and ten topics.

    However, should UC grow in countries, topics and languages – and this is the plan – then it might be helpful for users to have a place to look in order to remind themselves where they are.

    Is it possible to set up the off-canvas menu such that it reflects where the user is on the site … i.e. Contrasts_Germany:USA_Communication_Directness?

    Thanks

    John

    #2038976
    David
    Staff
    Customer Support

    Hi there,

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

    #2038986
    John

    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

    #2039156
    David
    Staff
    Customer Support

    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

    #2039195
    John

    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

    #2039731
    David
    Staff
    Customer Support

    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

    #2039752
    John

    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

    #2039780
    David
    Staff
    Customer Support

    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

    #2039788
    John

    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?

    #2039813
    David
    Staff
    Customer Support

    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.

    #2039821
    John

    Yes, my mistake.

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

    Thanks, David.

    #2039825
    John

    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>

    #2039826
    David
    Staff
    Customer Support

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

    #2039830
    John

    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?

    #2040300
    David
    Staff
    Customer Support

    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

Viewing 15 posts - 1 through 15 (of 43 total)
  • You must be logged in to reply to this topic.