[Resolved] Moving hamburger icon to the left of site logo?

[Eric]

Hey guys, I just wanted to ask a quick question about moving the “hamburger” menu (Off Canvas) around in the header? I’ve tried several different configurations within Customizer but I can’t see to get it the way I need it to display. I am trying to move the hamburger menu icon to the very LEFT of the header, before displaying the site logo and main nav. The I am hoping to use it more as “sub-menu” of sorts for visitors. Here are some examples of how I want it to look like:

https://www.prevention.com/weight-loss/g23473697/lowest-calorie-alcohol/#

https://www.townandcountrymag.com/style/beauty-products/g27814373/smile-lines-products/

Any ideas? Thanks again for your time… GENERATEPRESS ROCKS!

[David]

Hi there

you could use a Hook Element to add your own toggle button:

https://docs.generatepress.com/article/hooks-element-overview/

Choose the before_logo hook and add this HTML to it.

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

[Eric]

Aha yes that worked! but now there are 2 menu icons displayed? Is there anyway to disable the regular one and use this new one instead? I tried disabling the regular one but this removes the hook as well…

[Tom]

Try this:

li.slideout-toggle {
    display: none !important;
}

Let me know 🙂

[Eric]

Nailed it! Thanks guys, it worked! 🙂 awesome…

[Tom]

You’re welcome 🙂

[Author]

Posts