Off Canvas Panel

[David]

I am trying to setup Off Canvas Panel for mobile devices only. It works when I enable it in the customizer and select mobile only. However, it then replaces the slide down main menu with the off canvas panel. I’d like to have both active, my main menu and a button for off canvas panel for mobile only. How can I achieve this?

[David]

When I say it replaces my menu button in the header on mobile, I mean that the menu button still appears, however when clicked, it shows the off canvas panel when clicked and not the menu. I want to have a button for the off canvas panel and a button for the menu in the mobile header.

[Tom]

Hi there,

If the standard mobile menu stays intact, where would the off canvas panel toggle appear? What would appear in the off canvas panel?

Let me know 🙂

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

[David]

I was hoping to have the off canvas panel button appear before the menu navigation button. I want to have the menu and off canvas panel separate. I was hoping to have some BuddyPress widgets in the panel.

[Tom]

Not sure if this will work, but let’s test the idea..

1. Set the Off-Canvas Panel to “Desktop only”.
2. In the Header widget, add this:

<a class="slideout-toggle" href="#">Toggle</a>

Does that toggle the off-canvas panel on mobile while retaining the standard mobile menu?

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

[David]

Where can I access the header widgets? It’s not showing on the widgets page?

[David]

I am only seeing the “Top Bar” widget area. I tried adding the code you specified there, and it indeed works. It adds a toggle button to the top bar. However, what I would like to do, is replace the search button on the mobile header with horizontal 3 lines (opposite from the menu icon) and have that toggle the off canvas panel. How would I go about this?

I appreciate your assistance.

[Tom]

That should be do-able. Are you using the Mobile Header feature?

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

[David]

Yes, the mobile header feature is enabled.

[Tom]

Try this:

1. Add a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Add your content:

<div class="mobile-bar-items">
    <a class="slideout-toggle" href="#"></a>
</div>

3. Set the hook to: inside_mobile_header
4. Set the Display Rules to “Entire Site”

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

[David]

I just attempted this and it looks like no changes have been made on the site. I added the hook you specified. It didn’t do anything so I thought maybe I was missing something. I have tried setting the off canvas panel to just mobile and just desktop with no luck. Am I missing something?

[Tom]

Any chance you can link me to your site?

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

[David]

I can provide you with my site’s URL, but it’s a members only site so I will need to make credentials. Where can I privately provide you with that info?

[Tom]

You can send it here: https://generatepress.com/contact

Just be sure to mention this topic 🙂

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

[David]

It’s going to be difficult to setup credentials since it’s a membership site and can’t really give outside access.

Is there a way you can test on a staging site you probably have?

The first solution you mentioned:
“ 1. Set the Off-Canvas Panel to “Desktop only”.
2. In the Header widget, add this:

Toggle”

Does work. However I want to have the 3 lines (as shown to toggle the main menu on mobile), I want those same lines except instead of vertical, I want them horizontal for the off canvas toggle.

The hook you provided doesn’t do anything when I add it.

[Author]

Posts