Archived topic
Site Sidebar with Toggle for Mobile
17 replies · Started by Samuel on December 20, 2021
I am working on a new site build and the client wants a sidebar that will be used for a menu and some other information depending on what page loads. The sidebar should appear on desktop and tablet, but on mobile the wants a hamburger menu style toggle that will show/hide the sidebar menu. On mobile it should be full screen when shown and completely hidden when not active. And the sidebar should be full width on the left (top to bottom) which I don't think is possible in the customizer because it only adds a sidebar in the main content area.
Is the best way to do this still to use Customizer -> Layout -> Sidebars or should I be using a layout element for this?
How do I get a toggle button/icon to show hide the sidebar on mobile and make it full width on mobile? This is probably obvious but for some reason I can't find it in the customizer.
Hi there,
Unfortunately something like a toggle for the sidebar on mobile will require a complete custom solution involving javascript.
If it's absolutely necessary, then you can try hiring a developer using a service like Codeable suggested at the bottom of this page:
https://generatepress.com/what-support-includes/
Hope this helps.
Ok--Is there a way to do make the sidebar full height?
On desktop?
Can you link me to the page in question?
Right now I only have the site on my computer. I'm trying to see if I can use the built in GeneratePress sidebar feature and with some CSS make it full height instead of only within the content area.
Hi Samuel,
Maybe you can try importing the sider template from our site library to start with:
https://www.screencast.com/t/kLDqCNVsuh
Ah, thank you. I will try that and see if that does it.
This should help as well:
https://docs.generatepress.com/article/header-examples/#example-7
Thank you--I followed the instructions on that header example and I think it works. I'll need to use a block widget under the menu to get all the information I need. What's the best way to force the widgets to display below the menu?
Hi Samuel,
Can you try add a header widget, if it's not below the navigation, can you link us to the site?
Let me know :)
Well I'm testing this on a local machine. And I added a widget to that area and it's next to the navigation. I've attached a screenshot.
Quick question: Would it end up being easier overall for me to drop the standard GeneratePress header and footer and create the header and footer elements as blocks within the primary content area? That way the sidebar would appear to be full width. Would this be easier overall and less custom css?
If so what do I need to do to remove the default header and footer? I'm guessing there are some actions I need to modify so they won't run?
With a screenshot I can't tell what the issue or solution is, I'll have to see the code.
Using element to build footer is a good idea, but to replace the menu with dropdown (submenu) would require a lot of customizing.
I would suggest import the sider template and go from there.
I don't need a dropdown submenu, so the sidebar might be easier than trying to get the side menu to work. I'll try both and see which is best. Do you happen to know what code I need to tell GP not to generate the header and footer sections? I'm guessing I need to unset some action hooks so it doesn't run.
Please disregard the last post--I forgot I can do that easily with a layout element.
