Replace logo + force burger menu for tablet

Site URL: https://vibraphone-dove-dpfn.squarespace.com/

Hi everyone,

My header nav gets really crowded and starts stacking weirdly at around 1538px wide. Once you start scrolling the ugly stacking disappears because I added code to replace the logo with a smaller version upon scroll. 

To help with the stacking issue pre-scroll, I'd like to do two things:

1) Replace the logo with a smaller version starting at 1538px wide.

2) Force the hamburger menu at around 1400px wide.

Password to the site is He@1ing. I would appreciate any help!

Thanks so much!

Kacia

Hi. What is access password?

Hi @tuanphan, it's He@1ing

Thanks!

Add to Home > Design > Custom CSS

@media screen and (min-width:1400px) {
 /* 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;
}
}

12 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (min-width:1400px) {
 /* 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;
}
}

 

Thank you! I was having trouble with it and then changed "min-width" to "max-width" and then it worked perfectly!