How to reduce spacing between navigation links CSS

Question

so here's my question... so close to finishing some css, an issue lies in closing up the space between 'series' and 'portfolios' on my Squarespace site. Just one little thing left!! I've attached a photo... any ideas how??

Many thanks in advance!

EDIT:

This is the entire code that I have in the custom CSS box.

#header #logoWrapper, 

 #header #siteTitleWrapper { 

     position: relative; 

     left: 15%; 

     -webkit-transform: translate(-50%,0); 

     -moz-transform: translate(-50%,0); 

     -ms-transform: translate(-50%,0); 

     -o-transform: translate(-50%,0); 

     transform: translate(-50%,0); 

     text-align: right !important;

 }#sitetitle { text-align: left }



 #header #mainNavWrapper .index { 

     margin: 0 0 0 100px !important; 

     text-align: left !important;

 }

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

First, I would remove the CSS you wrote (included in your question), as it's bound to cause problems at different widths and on different devices. It's quite problematic.

Instead, try using the following CSS which minimally overrides Squarespace's default rules, is easily adjusted, won't affect the mobile navigation, and should be more stable across different platforms.

/*Media query prevents messing up mobile nav.*/
@media only screen and (min-width: 769px) {
    #header {
        padding-left: 10%;
        /*Adjust this as desired. Default is 30px, but looks like you have more than that in your screenshot.*/
    }
    #headerNav {
        margin-left: 6% !important;
        /*Adjust as desired. Going more than this may result in wrapped nav at ~750px.*/
    }
    #header #logoWrapper,
    #header #siteTitleWrapper {
        display: inline-block;
        position: static;
        transform: none;
        text-align: left;
    }
    #header #logoWrapper,
    #header #siteTitleWrapper,
    #header #headerNav {
        display: inline-block;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .expand-homepage-index-links #headerNav .index.home,
    .expand-homepage-index-links #showOnScrollWrapper .index.home {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    #header .folder {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

How to reduce spacing between navigation links CSS

Sign up