- This topic has 21 replies, 3 voices, and was last updated 1 year ago by Tom.
February 23, 2020 at 2:05 pm #1174688David
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?February 23, 2020 at 3:53 pm #1174732David
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.February 23, 2020 at 6:27 pm #1174779TomLead DeveloperLead Developer
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 🙂February 23, 2020 at 7:09 pm #1174797David
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.February 24, 2020 at 9:20 am #1175472TomLead DeveloperLead Developer
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?February 24, 2020 at 10:47 am #1175548David
Where can I access the header widgets? It’s not showing on the widgets page?February 24, 2020 at 1:02 pm #1175680David
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.February 24, 2020 at 6:06 pm #1175824TomLead DeveloperLead DeveloperFebruary 24, 2020 at 6:26 pm #1175845David
Yes, the mobile header feature is enabled.February 25, 2020 at 9:01 am #1176522TomLead DeveloperLead Developer
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:
4. Set the Display Rules to “Entire Site”February 25, 2020 at 9:24 am #1176554David
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?February 25, 2020 at 2:15 pm #1176775TomLead DeveloperLead DeveloperFebruary 25, 2020 at 3:07 pm #1176808David
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?February 25, 2020 at 3:54 pm #1176845TomLead DeveloperLead DeveloperMarch 12, 2020 at 1:42 pm #1193263David
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:
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.
- You must be logged in to reply to this topic.