[Support request] Off Canvas Panel

Home Forums Support [Support request] Off Canvas Panel

Home Forums Support Off Canvas Panel

Viewing 7 posts - 16 through 22 (of 22 total)
  • Author
    Posts
  • #1193268
    David

    I guess to rephrase what I mean, when I enable the off-canvas panel for desktop, it shows a button with 3 horizontal lines that when clicked, the off canvas panel shows. I want that same 3 horizontal line button to also show on mobile beside the navigation 3 vertical line button.

    When I enter this in as a hook:

    It shows a text called “Toggle” and when it’s clicked, the off canvas panel opens. Is there a way to replace the “Toggle” text with the 3 horizontal lines button?

    #1193286
    David

    Okay I think that I figured it out. I set the off canvas panel to desktop only and added this as a hook:

    <div class="mobile-bar-items">
    <li class="slideout-toggle menu-item-align-right"><a href="#"><span>Sidebar</span></a></li>
    </div>

    Now a couple issues. Firstly, I want to hide the off canvas panel button on desktop. I only want it to show on mobile. How can I hide the 3 horizontal lines button on desktop?

    Also, is there a way to use an SVG of PNG file in place of the default 3 horizontal lines button?

    #1193372
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    To hide the button in the navigation, try this:

    .main-navigation .menu .slideout-toggle {
        display: none !important;
    }

    Are you wanting to add your own SVG file?

    You could try doing this:

    .slideout-toggle:before {
        display: none;
    }

    Then add your SVG or PNG into the Element you added.

    #1193374
    David

    Yes, I would like to add my own SVG or PNG file. How would I add it?

    #1193575
    David
    Staff
    Customer Support

    Hi there,

    you would include it within your markup e.g

    <div class="mobile-bar-items">
    <li class="slideout-toggle menu-item-align-right"><a href="#"><img src="my-toggle-image-url/image.png"><span>Sidebar</span></a></li>
    </div>
    #1199926
    David

    Hi there,

    That code does technically does display the PNG image, however 2 issues.. firstly, the image appears way too large. It covers basically the entire page. Is there a way to only have it load the same size as the 3 horizontal lines used by the menu nav button? And secondly, even when I use CSS to try and resize it, I notice that it still loads the 3 horizontal lines.

    And also, the CSS code that Tom provided to remove the off canvas panel button from the desktop site does not work. It removes it entirely.

    #1200057
    Tom
    Lead Developer
    Lead Developer

    Is it possible for us to see what you have so far?

    I updated the CSS above to hide the standard toggle: https://generatepress.com/forums/topic/off-canvas-panel/page/2/#post-1193372

    You likely need to target your PNG with CSS to make it smaller:

    .your-image-class {
        width: 30px;
    }
Viewing 7 posts - 16 through 22 (of 22 total)
  • You must be logged in to reply to this topic.