slideout menu

[Chad Biggs]

Im trying to get my slideout menu working. Here is what I have done so far …
Create a new menu named “slide out”.
In the menu settings, tick slideout menu.
Save menu.
Add post to the menu.
In Menu locations > theme location – slideout menu, select “slide out”.
Save menu.

What did I forget to do, it doesn’t work?

Chad

[Tom]

You have menu items in that created menu, correct?

If so, the last thing you should need to do is go to “Customize > Menu Plus” and enable the slideout menu on desktop, mobile or both.

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

[Chad Biggs]

Yes, there are menu items. Slideout menu in the customizer is set to both. I want it to work on the desktop. I can get the menu icon when I close down on the width of the window, but not when the window is expanded.

Chad

[Tom]

Do you have a primary menu set as well? That’s the only way for the menu icon to appear on desktop.

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

[Chad Biggs]

Ok, thank you. That did the job.

[Chad Biggs]

Is there a way to add the word “menu” on the desktop, like on the mobile?

[Tom]

Your best bet is to hide the current item:

.slideout-toggle {
    display: none;
}

Then add a custom link to your menu and give it the class of custom slideout-toggle.

In your custom link you can give it a navigation label of: <i class="fa fa-bars"></i> Menu

Then add this CSS:

.custom.slideout-toggle {
    display: block;
}

That should do it 🙂

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

[Chad Biggs]

Works perfect! Thank you Tom.

Chad

[Tom]

You’re welcome 🙂

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

[Rob]

It took a minute to wrap my head around that one but now I get it. I didn’t see how eliminating the menu items made any sense. Menu now looks like I want. Thanks a ton for your patience.

[Tom]

Glad I could help! 🙂

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

[Roger]

I had the same problem, but solved it using the info above, however the slide-out toggle has now forced my logo in the header off to the right hand side. HELP!?

[Leo]

Hi there,

This topic is quite old.

Can you start a new one and provide a link to your site?

Thanks!

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

[David]

Hi tom
I tried your recommendation to add the word menu to hamburger menu icon but doesnt seem to be working
1. original slideout toggle didnt disappear
2. the new toggle had 2 toggles plus the word Menu

See it at bizzservices.org
thanks
David

[Leo]

Hi David,

The original topic is from 2015 so a lot has changed since then.

Do you mind opening a new topic?

Thanks!

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

[Author]

Posts