move the hamburger menu below the website title on mobile

I am using 7.1 and I want to move the hamburger menu icon to be below the site title rather than on the right side of the header. There are no Squarespace presets that allow for this. Can anyone help me with this?

the password is 12345678

Can you share your website URL?

jeuno.squarespace.com

this worked thanks so much

On 8/12/2023 at 10:16 AM, tuanphan said:

You can add this to Design > Custom CSS or Website > Website Tools > Custom CSS

Thanks the code is working! to put the hamberger below the title, but it's not exactly centered like you can see on my screenshot, do you know a way to do this ? Thanks a lot !!!!

On 3/15/2024 at 1:11 AM, PurpleFox said:

Thanks the code is working! to put the hamberger below the title, but it's not exactly centered like you can see on my screenshot, do you know a way to do this ? Thanks a lot !!!!

What is site url? I can check easier

On 3/16/2024 at 8:47 AM, tuanphan said:

What is site url? I can check easier

I just see a strange thing : the burger is well centered on desktop when I reduce the width of the window and the mobile version of the site appears. But on smartphone that's not the case with Safari and Chrome.

On 3/17/2024 at 1:36 AM, PurpleFox said:

The url is https://www.hugomartial.com/ 

We can see better on this page https://www.hugomartial.com/mots that the burger is not centered on mobile.

I just see a strange thing : the burger is well centered on desktop when I reduce the width of the window and the mobile version of the site appears. But on smartphone that's not the case with Safari and Chrome.

Did you solve with burger? Just tried with Chrome

5 hours ago, tuanphan said:

Did you solve with burger? Just tried with Chrome

 

No ! Thanks to your screenshot we see it's works on Android ( and I see that the site title is on two lines 😱whereas on my iPhone 12 it's on a single line) . But it doesn't work on Safari and Chrome on iOS (see my new screenshots) at least not on my iOS 17.3.1 version. 

Do you have any ideas on how to solve this?

5 minutes ago, PurpleFox said:

Do you have any ideas on how to solve this?

Try this addition:

.header .header-mobile-layout-logo-left-nav-right .header-display-mobile .header-burger {
    justify-content: center !important;
    flex: 0 0 50px;
}
.header .header-burger {
    align-items: center !important;
    width: 200px;
}

@Ziggy It works, thank you!