Site logo

[Resolved] Using Elements hooks to display menu/content in Off Canvas Panel

Home Forums Support [Resolved] Using Elements hooks to display menu/content in Off Canvas Panel

Home Forums Support Using Elements hooks to display menu/content in Off Canvas Panel

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1906457
    Konstantin

    Hi! I’m trying to display different menus and other content on different sections of my site using Elements and Hooks. It’s working great when I use the available hooks and the custom_shortcode_hooks workaround for random areas of the site. However, I can’t seem to figure out how to display those menus in the Off Canvas Panel using Elements Hooks with Display Rules, since there are no such off canvas hooks. There are the generate_iside_mobile_… hooks, but those don’t seem to do the trick. I already know how to use the Off Canvas Widget area, but I can’t set Display Rules on there. Thanks in advance!

    #1906610
    David
    Staff
    Customer Support

    Hi there,

    there are two hooks you can use:

    generate_inside_slideout_navigation
    generate_after_slideout_navigation

    The Off Canvas used to be called Slideout 🙂

    #1907042
    Konstantin

    Thank you, David! I am having some weird issue though. I have a menu assigned to the Off Canvas panel (the 3 items in all caps). The additional menu I display above does not show up on mobile. If I use my browser on desktop and resize to get the hamburger and click to get the Off Canvas panel, the additional menu still doesn’t show up, until I expand the browser. I’m not using any CSS to hide that menu, so I’m not sure what’s going on here.


    #1907135
    Ying
    Staff
    Customer Support

    Hi Konstantin,

    Any chance you can link us to the site in question?

    You can use the private information field.
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Let me know 🙂

    #1907158
    Konstantin

    Hi Ying. Login info provided in the field. Thank you!

    #1907226
    Konstantin

    I was able to figure it out. This is what was causing the issue:

    @media (max-width: 768px) {
    .main-navigation ul, .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul, .gen-sidebar-nav, .has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav) {
        display: none;
    }
    }

    The fix:

    @media (max-width: 768px) {
    .main-navigation ul {
        display: block;
    }
    }
    #1907242
    Konstantin

    Thank you!

    #1907245
    Ying
    Staff
    Customer Support

    Nice! Glad you figured it out!

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