Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Replace logo + force burger menu for tablet


Kacia

Question

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 post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0

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

 

Link to post
  • 0
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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...