Squarespace: Navigation Tricks

Some tricks with Header Navigation on Squarespace 7.1

Hide Navigation on One Page

To hide navigation bar on One Page, add to Page Settings > Advanced > Header

<style>
.header-nav {
    display: none;
}
.burger-box {
    visibility: hidden;
}
</style>

Hide Navigation Bar (Entire Site)

Add to Home > Design > Custom CSS

.header-nav {
    display: none;
}
.burger-box {
    visibility: hidden;
}

Hide page from Navigation

Add to Home > Design > Custom CSS

with /contact is Page URL Slug

.header-nav [href="/contact"] {
    display: none;
}
.header-menu-nav [href="/contact"] {
    display: none;
}

Add button to navigation bar

You can use this code to turn any link on navigation to button.

Add to Home > Design > Custom CSS

with /about is Page URL Slug

.header-nav-item [href="/about"], .header-menu-nav-item [href="about"] {
    background: black;
    color: white;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: 5px;
}

Change Hamburger Navigation Icon

Add to Home > Design > Custom CSS

.burger-box div {
    display: none;
}
.burger-box {
    background-image: url(https://static.thenounproject.com/png/3143942-42.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Change Hamburger icon to word “Menu”

.burger-box:after {
    content: "menu";
    width: 60px;
    height: 30px;
    display: block;
    color: black;
    font-size: 20px;
    visibility: visible;
}
.burger-box div {
    display: none;
}

CSS – Remove Mobile Navigation

Add to Home > Design > Custom CSS

.header-burger {
    visibility: hidden;
}

Sticky navigation bar on scroll

To make navigation bar scroll with page, also known as Sticky Navigation, Fixed Navigation, login to your site

Hover on Right Side > Click Edit

Hover on Header > Click Edit Site Header

Header Layout box will appear. Click Style

Enable Fixed Position

Done. Save

Shrinking navigation bar when scrolling down

Do above.

Then add this CSS to Home > Design > Custom CSS

.header-announcement-bar-wrapper.shrink {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

Share this post:

Leave a Comment