Jump to content

Replace logo + force burger menu for tablet

Recommended Posts

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

Link to comment
  • Replies 4
  • Views 679
  • Created
  • Last Reply

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.