[Support request] Hamburger menu left side of logo

[Mårten]

Hi,

I’m trying to get the hamburger menu placed on the left side of the logo instead of the right one as it is now. I want it to be on the left side on both desktop and mobile.

I use a code to display the logo in the center of the menu, which works great. But as I said, I want the hamburger menu to be placed on the left instead of the right.

Do you have a solution for that? 🙂

Thanks!

[David]

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.

[Mårten]

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?

[Fernando]

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. 🙂

[Mårten]

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!

[Fernando]

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.

[Mårten]

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.

[David]

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 );
});

[Mårten]

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!

[Fernando]

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%);
    }
}

[Author]

Posts