Off Canvas Panel

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?

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?

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.

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

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>

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.

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;
}