[Resolved] Move hamburger menu to page header

[David]

Hi my site currently has hamburger menu popout for both the desktop and mobile versions.
Client wants to not have the Nav bar, so I wondered how to move the amburger memu to page header (I use elementor) for desktop & mobile
Thanks
David

[Tom]

Hi there,

So you want to ditch the logo, menu toggle and search icon? Then you’d add a mobile toggle element in a custom location?

Let me know 🙂

[David]

Hi,
Tom yes correct.
David

[Tom]

This is experimental, but we’ll give it a shot.

1. Remove the navigation logo.

2. Remove the navigation search.

3. Add this code to your Page Header (or wherever):

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

[David]

Hi Tom.
Our logo is actually part of the header.
David

[David]

Hi Tom, that works thanks, if I also want the word Menu next to the hamburger (as in current page) and have colour black (its blue as its a link)
thanks
David

[David]

Hi there,

you can add the title to the markup like so:

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

Color styling:

.slideout-toggle a, .slideout-toggle a:hover {
    color: #000;
}

[David]

Thanks, great support.
Regards
David

[David]

Glad we could help.

[Author]

Posts