chantelleandercastle

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:

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!

Great solution, @tuanphan! I've implemented the code with success, but it is applying to each slideshow across the website, and I'd like to only apply it to one. It's also leaving large spaces below the h2 content in other galleries and accordions after the 1st and 2nd item.

Website URL: 

https://apricots-seal-6csp.squarespace.com/speaking

(No password on the site, however it has a cover page with no nav at the moment. Using the /speaker url should get you to the rest of the site.)

Correct page and usage:

The code I used:

/* Banner slideshow icons */

.user-items-list-item-container[data-section-id="63973ad77586a20269909913" {
    li h2:after {
    content: "";
    width: 230px;
    height: 125px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    text-align: center;
    margin: 10px auto;
}
/* icon 1 */

li:nth-child(1) h2:after {
    background-image: url(https://static1.squarespace.com/static/6383b4c63e5d27458802b1c8/t/639740c6281a851b32a1be9a/1670856902653/1.png);
}
/* icon 2 */

li:nth-child(2) h2:after {
    background-image: url(https://static1.squarespace.com/static/6383b4c63e5d27458802b1c8/t/639741052eedab45710d5e72/1670856965966/2.png);
}
}

One of a few incorrect pages that I'd like to fix to remove the space and logo:

Thanks, as always! I've used a lot of your code over the years and I appreciate you!