[Resolved] Hook to insert slideout menu widget to also display in the mobile menu?

Home Forums Support [Resolved] Hook to insert slideout menu widget to also display in the mobile menu?

Home Forums Support Hook to insert slideout menu widget to also display in the mobile menu?

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #852018
    Jordan

    Hello,

    I went through documentation and searched the forums with no luck.

    I have a widget being used on the slideout menu. However, the slideout menu only appears on the desktop menu.

    Is there a way to hook the slideout widget so it also appears inside the primary mobile menu?

    Thanks,

    Jordan

    #852211
    David
    Staff
    Customer Support

    Hi there,

    any reason why you don’t enable the slide-out on Mobile as well?

    #852593
    Jordan

    Hello David,

    My client does not like the behavior of the slide-out menu on mobile. The menu needs to be full width on mobile but at the same time, the header logo cannot be covered/blocked. That doesn’t look possible with the slide-out menu on mobile unless the logo is added to the top of the slide-out menu somehow.

    The mobile menu achieves both of those requirements with the width and logo, I just need the widget from the slide-out menu to appear at the end of the mobile menu also.

    If this isn’t possible with the default GP setup, I’ll try the Quad Menu plugin.

    #852946
    Tom
    Lead Developer
    Lead Developer

    What are you adding to the slideout menu? Where would it display in the mobile menu?

    #852994
    Jordan

    Tom,

    There are some social media icons/links in the slide-out menu widget. I would also like that widget to display at the bottom of the mobile menu, just like how it does on the slide-out menu.

    #853660
    Tom
    Lead Developer
    Lead Developer

    Are you using the Mobile Header or the standard menu?

    #853893
    Jordan

    I am using the standard responsive menu.

    #854386
    Tom
    Lead Developer
    Lead Developer

    Should be pretty easy ๐Ÿ™‚

    1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
    2. Set the hook to inside_navigation
    3. Check the Execute PHP checkbox.
    4. Add this as the content:

    <?php
    if ( is_active_sidebar( 'slide-out-widget' ) ) {
    	echo '<div class="navigation-widget-area">';
    		dynamic_sidebar( 'slide-out-widget' );
    	echo '</div>';
    }
    ?>

    5. Set the Display Rules to Entire Site.

    Now add this CSS:

    .navigation-widget-area {
        display: none;
    }
    
    @media (max-width: 768px) {
        .toggled .navigation-widget-area {
            display: block;
            order: 100;
            text-align: center;
            padding-top: 30px;
        }
    
        .toggled .inside-navigation {
            display: flex;
            flex-direction: column;
        }
    }
    #856152
    Jordan

    Tom,

    I tried out that code and the CSS is not quite working correctly. I haven’t done that much Flexbox CSS, so I’ll probably need some help here.

    The ‘order’ property is causing the widget to not appear if it is set to anything other than 0, initial or inherit. If the order is set to 0, initial or inherit, the widget appears underneath the .site-logo div and right above the .menu-toggle button. I guess I gotta figure out how to get it to appears at the bottom after the the last menu item.

    #856338
    Tom
    Lead Developer
    Lead Developer

    Strange, it worked in my tests. Any chance you can link me to the page?

    #858995
    Jordan

    Hi Tom,

    I set up a temporary site for you to look at. Link here – https://jpwebdev.info/gpsupport/

    #859650
    Tom
    Lead Developer
    Lead Developer

    Is the hook set up and published? I’m not seeing the HTML inside your navigation.

    Let me know ๐Ÿ™‚

    #859978
    Jordan

    Oops, my bad. The hook was set to draft. It is now published and I changed that ‘order’ CSS property to ‘initial’ so you can see where the widget is showing up.

    #860008
    Tom
    Lead Developer
    Lead Developer

    Hmm, ideally we need a hook after the menu.

    I’ve gone ahead and added it in GP 2.3, so you’re safe to make the change to your current version if you’d like: https://github.com/tomusborne/generatepress/commit/4e521812694342b8f1d1a7a7af68ae182d540a44

    Then you can choose the Custom Hook option in your Element, and add the hook: generate_after_primary_menu

    Then this would be your new CSS:

    .navigation-widget-area {
        display: none;
    }
    
    @media (max-width: 768px) {
        .toggled .navigation-widget-area {
            display: block;
            text-align: center;
            padding-top: 30px;
        }
    }
    #860069
    Jordan

    I updated the test site to 2.3 and added the updated CSS code. I can’t get the div.navigation-widget-area to appear after div.main-nav even though it appears after it in the HTML code. https://jpwebdev.info/gpsupport/

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