[Resolved] Off canvas burger menu in custom header

Home Forums Support [Resolved] Off canvas burger menu in custom header

Home Forums Support Off canvas burger menu in custom header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1604693
    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

    #1604797
    David
    Staff
    Customer Support

    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.

    #1604812
    David

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

    #1604862
    David
    Staff
    Customer Support

    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>
    #1604873
    David

    That’s great – thanks David

    #1604875
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.