Hamburger menu left side of logo

Hi there,

the heart icon and the search box - can you add them to the site using a Hook ( or Block ) Element - they need to go in the generate_menu_bar_items hook.

That way all the elements are in the same container and can be moved around.

Hi,
If I place the search box and the heart icon via Element. Can I then choose where the hamburger menu should be located? How do I place the burgers icon on the far left?

Hi Marten,

To confirm, by “far left” do you mean moving it here?: https://share.getcloudapp.com/v1ugNnoj

If so, can you try creating a Hook Element with this code inside:

<span class="menu-bar-item slideout-toggle hide-on-mobile 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>

Then, hook it to generate_before_logo and display it in your Entire site as such: https://share.getcloudapp.com/P8u1kD0G

If you’re referring to a different location like: https://share.getcloudapp.com/lluE98j0, kindly let us know.

Hope to hear from you soon. :)

Hello,

I'm having trouble with the hamburger menu.
I used the code (see below) to move the hamburger icon to the left instead of the right. But now the hamburger menu appears on both the left and right sides. I tried to remove the higher one with css but then both are hidden.

In mobile, only the left hamburger menu is displayed. I want the right one to appear on all devices. If you could help me, that would be great!

I see. Can you try setting the Hook we just created to draft, then add this snippet instead to test?:

remove_action( 'generate_menu_bar_items', 'generate_do_off_canvas_toggle_button', 15 );
add_action( 'generate_before_logo', 'generate_do_off_canvas_toggle_button', 15 );

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

Let us know how it goes.

Hello,

Thanks for quick reply.
I have now entered your snippet. The hamburger menu moves to the left, but the right one is still displayed. How do I remove it? I want to keep the shopping cart and other menu items on the right, if possible.

Hi there,

try changing this:

remove_action( 'generate_menu_bar_items', 'generate_do_off_canvas_toggle_button', 15 );

to:

add_action('wp', function(){
    remove_action( 'generate_menu_bar_items', 'generate_do_off_canvas_toggle_button', 15 );
});

It seems to work. Thanks!
Is it possible for the hamburger icon to be placed to the left of the logo in the mobile as well?

Thank you!

Can you try adding this through Appearance > Customize > Additional CSS?:

@media (max-width: 768px) {
    header .mobile-menu-control-wrapper {
        margin-left: unset;
        display: flex;
        flex-direction: row-reverse;
        width: 100%;
        justify-content: space-between;
        background-color: unset;
    }

    header .mobile-menu-control-wrapper button.menu-toggle {
        flex-grow: 0;
    }

    header .site-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}