7.1 Force hamburger menu on desktop - reduce spacing between pages and fix underline for active page

I've somewhat successfully used the following code to force a hamburger nav with side menu on 7.1:

.header .header-burger{display:flex}
.header-nav, .header-actions {display:none}

@media screen and (min-width: 960px) 
{ .header--menu-open .header-menu {
 opacity: 0.8; visibility: visible;
width: 30%; 
margin-left: 70%;
box-shadow: -5px 5px 15px #3ABDC4}}

.header--menu-open .header-menu a  {font-size: 20px; line-height: 0.4em !important; padding-top: 0rem !important; padding-bottom: 0rem !important; padding: 0rem !important;  }

However, I can't seem to target the space between page links. I've used the line-height to improve it slightly, but that puts the underline for the active page in the middle of the page name. I'm okay with keeping the underline if I can change line-height back to 1em but have a smaller space between the page titles. I'd like the social links to appear above the fold and have the vertical padding between items to be about 75% of what it is currently.

No password on the site, but it's currently on a cover page as home with no nav. Use the following url: https://apricots-seal-6csp.squarespace.com/work

Thanks in advance!

4 hours ago, chantelleandercastle said:

I've somewhat successfully used the following code to force a hamburger nav with side menu on 7.1:

.header .header-burger{display:flex}
.header-nav, .header-actions {display:none}

@media screen and (min-width: 960px) 
{ .header--menu-open .header-menu {
 opacity: 0.8; visibility: visible;
width: 30%; 
margin-left: 70%;
box-shadow: -5px 5px 15px #3ABDC4}}

.header--menu-open .header-menu a  {font-size: 20px; line-height: 0.4em !important; padding-top: 0rem !important; padding-bottom: 0rem !important; padding: 0rem !important;  }

 

However, I can't seem to target the space between page links. I've used the line-height to improve it slightly, but that puts the underline for the active page in the middle of the page name. I'm okay with keeping the underline if I can change line-height back to 1em but have a smaller space between the page titles. I'd like the social links to appear above the fold and have the vertical padding between items to be about 75% of what it is currently.

 

No password on the site, but it's currently on a cover page as home with no nav. Use the following url: https://apricots-seal-6csp.squarespace.com/work

 

Thanks in advance!

Try adding to Home > Desing > Custom Css

.header--menu-open .header-menu a {
  margin: 0;
  padding: 10px 20px !important;
  line-height: 1 !important;
}

Support me by pressing 👍  or marking as solution if this useful for you

My testing

Thank you! That works great except for the padding also applied to the social icons:

So I alterered the code slightly to get this:

.header--menu-open .header-menu a {
  margin: 0;
  font-size: 20px;
  font-padding: 10px 20px !important;
  line-height: 2.4 !important;
}
 

Now if only I could get the text decoration (underline) for active page to stick closer to the text!

When I add font- in front of padding, it messes everything up like this:

On 12/14/2022 at 11:36 AM, chantelleandercastle said:

Thank you! That works great except for the padding also applied to the social icons:

 

So I alterered the code slightly to get this:

 

.header--menu-open .header-menu a {
  margin: 0;
  font-size: 20px;
  font-padding: 10px 20px !important;
  line-height: 2.4 !important;
}
 

 

Now if only I could get the text decoration (underline) for active page to stick closer to the text!

 

 

When I add font- in front of padding, it messes everything up like this:

 

 

 

To make underline - closer the text, just change line-height of nav items

/* Underline */
.header-menu-nav-item-content {
    line-height: 25px !important;
}