- This topic has 21 replies, 3 voices, and was last updated 4 years ago by Tom.
-
AuthorPosts
-
February 23, 2020 at 2:05 pm #1174688metal
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 #1174732metalWhen 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 DeveloperHi 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 🙂
February 23, 2020 at 7:09 pm #1174797metalI 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 DeveloperNot 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 #1175548metalWhere can I access the header widgets? It’s not showing on the widgets page?
February 24, 2020 at 1:02 pm #1175680metalI 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 DeveloperThat should be do-able. Are you using the Mobile Header feature?
February 24, 2020 at 6:26 pm #1175845metalYes, the mobile header feature is enabled.
February 25, 2020 at 9:01 am #1176522TomLead DeveloperLead DeveloperTry 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”February 25, 2020 at 9:24 am #1176554metalI 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 DeveloperAny chance you can link me to your site?
February 25, 2020 at 3:07 pm #1176808metalI 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 DeveloperYou can send it here: https://generatepress.com/contact
Just be sure to mention this topic 🙂
March 12, 2020 at 1:42 pm #1193263metalIt’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.
-
AuthorPosts
- You must be logged in to reply to this topic.