[Support request] Off Canvas Panel

Home Forums Support [Support request] Off Canvas Panel

Home Forums Support Off Canvas Panel

  • This topic has 21 replies, 3 voices, and was last updated 4 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #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?

    #1174732
    metal

    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.

    #1174779
    Tom
    Lead Developer
    Lead Developer

    Hi 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 🙂

    #1174797
    metal

    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.

    #1175472
    Tom
    Lead Developer
    Lead 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?

    #1175548
    metal

    Where can I access the header widgets? It’s not showing on the widgets page?

    #1175680
    metal

    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.

    #1175824
    Tom
    Lead Developer
    Lead Developer

    That should be do-able. Are you using the Mobile Header feature?

    #1175845
    metal

    Yes, the mobile header feature is enabled.

    #1176522
    Tom
    Lead Developer
    Lead Developer

    Try 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”

    #1176554
    metal

    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?

    #1176775
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link me to your site?

    #1176808
    metal

    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?

    #1176845
    Tom
    Lead Developer
    Lead Developer

    You can send it here: https://generatepress.com/contact

    Just be sure to mention this topic 🙂

    #1193263
    metal

    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.

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