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

[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

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

[Tom]

Are you using the Mobile Header or the standard menu?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jordan]

I am using the standard responsive menu.

[Tom]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jordan]

Hi Tom,

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

[Tom]

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

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

[Tom]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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/

[Author]

Posts