Archived topic
Off canvas burger menu in custom header
5 replies · Started by David on January 4, 2021
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
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.
Thanks David, is it possible to get the standard generatepress burger icon to show?
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>
That's great - thanks David
You're welcome