Forcing Mobile Menu earlier on desktop

Hello,

I have built a website with split screen navigation, but I find if I make my desktop narrower at all the navigation items begin to stack/overlap. As a solution, I hoped to force mobile nav earlier than 787 px (1100 px).  It seems to be working, but when I do so, the logo is quite off centre (photo attached). Anyone know how to fix this?

Website: atelieroleana.squarespace.com

Password: ao

Code I am currently using:

@media screen and (max-width:1100px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

Hi @tuanphan!

Thanks, this worked, but now the logo is centred on mobile but slightly off centred when it's on desktop but narrowed (See screenshots). Is there a fix for this?

Website: atelieroleana.squarespace.com

Password: ao

On 5/31/2024 at 4:11 AM, KatJarv said:

Hi @tuanphan!

Thanks, this worked, but now the logo is centred on mobile but slightly off centred when it's on desktop but narrowed (See screenshots). Is there a fix for this?

 

Website: atelieroleana.squarespace.com

Password: ao

 

Logo is fine to me

@tuanphan

It looks find when the desktop is wide (like your screenshot above), and in mobile, but in between (around 1100px), it's off centred. See below screenshots. It's easier to see when you open the menu overlay.

On 5/21/2024 at 3:32 PM, tuanphan said:

You can use this CSS code under

@media screen and (max-width:1100px) {
.header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - 50px") !important;
}
}

 

Try changing to this

@media screen and (max-width:1100px) {
.header-title-nav-wrapper {
    flex: 0 0 100% !important;
}
}