- This topic has 21 replies, 3 voices, and was last updated 2 years, 10 months ago by
Tom.
-
AuthorPosts
-
February 23, 2020 at 2:05 pm #1174688
metal
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 #1174732metal
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 #1174779Tom
Lead 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 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 23, 2020 at 7:09 pm #1174797metal
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 #1175472Tom
Lead 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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 24, 2020 at 10:47 am #1175548metal
Where can I access the header widgets? It’s not showing on the widgets page?
February 24, 2020 at 1:02 pm #1175680metal
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 #1175824Tom
Lead DeveloperLead DeveloperThat 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-developmentFebruary 24, 2020 at 6:26 pm #1175845metal
Yes, the mobile header feature is enabled.
February 25, 2020 at 9:01 am #1176522Tom
Lead 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”Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 25, 2020 at 9:24 am #1176554metal
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 #1176775Tom
Lead DeveloperLead DeveloperAny 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-developmentFebruary 25, 2020 at 3:07 pm #1176808metal
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 #1176845Tom
Lead DeveloperLead DeveloperYou 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-developmentMarch 12, 2020 at 1:42 pm #1193263metal
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.
-
AuthorPosts
- You must be logged in to reply to this topic.