[Resolved] Off canvas burger menu in custom header

[David]

Hello

I’ve added a custom header so I can set it up as 3 column header by following this…

https://docs.generatepress.com/article/split-header-three-sections/

How can I add the off canvas burger menu in to the header-section-1 div?

http://185.20.51.60/~cocoonco/

Thanks
Dave

[David]

Hi there,

any element with the slideout-toggle class will trigger the Off Canvas Panel ( as long as its enabled in the customizer eg.

<span class="slideout-toggle"><a href="#">Menu</a></span>

You can replace Menu with your own <img> HTML or inline SVG icon.

[David]

Thanks David, is it possible to get the standard generatepress burger icon to show?

[David]

Use this HTML instead:

<span class="slideout-toggle has-svg-icon"><a href="#"><span class="gp-icon pro-menu-bars">
	<svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
	    <path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z"></path>
	</svg>
</span></a></span>

[David]

That’s great – thanks David

[David]

You’re welcome

[Author]

Posts