[Resolved] Site Sidebar with Toggle for Mobile

Home Forums Support [Resolved] Site Sidebar with Toggle for Mobile

Home Forums Support Site Sidebar with Toggle for Mobile

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #2054740
    Samuel

    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.

    #2054857
    Leo
    Staff
    Customer Support

    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.

    #2054862
    Samuel

    Ok–Is there a way to do make the sidebar full height?

    #2054871
    Leo
    Staff
    Customer Support

    On desktop?

    Can you link me to the page in question?

    #2054931
    Samuel

    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.

    #2054932
    Ying
    Staff
    Customer Support

    Hi Samuel,

    Maybe you can try importing the sider template from our site library to start with:
    https://www.screencast.com/t/kLDqCNVsuh

    #2054934
    Samuel

    Ah, thank you. I will try that and see if that does it.

    #2054937
    Leo
    Staff
    Customer Support
    #2054965
    Samuel

    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?

    #2054974
    Ying
    Staff
    Customer Support

    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 🙂

    #2054992
    Samuel

    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.Block added to header element.

    #2054999
    Samuel

    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?

    #2055081
    Ying
    Staff
    Customer Support

    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.

    #2055550
    Samuel

    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.

    #2055822
    Samuel

    Please disregard the last post–I forgot I can do that easily with a layout element.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.