Bechma Bechma - 4 years ago 133
CSS Question

How to reduce spacing between navigation links CSS

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??

website

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




Answer Source

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;
    }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download