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:

10 thoughts on “Squarespace: Navigation Tricks”

  1. Thanks for your tips. I’m using Nolan Co template and when I try to put your code about hidding menu in one page, that does not fuction. That hides from all pages instead of one. Thanks in advance

    Reply
    • Which code did you use? Can you share site url? Also I sent you an email. You can reply there. Comments here don’t work properly.

      Reply
  2. These are great! I was trying to use the “Add button to navigation” code to add a background image instead of colour and it doesn’t work. Can you provide a solution to making a navigation item have a background image?

    Reply
  3. Hi! thank you sooo much for these! wondering if you’d be able to add how to fake a secondary nav? i miss that from 7.0. would love my site to read [link siteName link]. my missing piece is the navigation has such serious side padding or something so they keep overflowing underneath (since my site name is long). thanks! https://rust-vuvuzela-cepg.squarespace.com/ “salt” for reference

    Reply
  4. I would like to inject Ads by Google code above the primary navigation of the site. Right now when inject the code it is automatically placed under the navigation. Any idea on how I can fix to be above the top navigation?

    Reply

Leave a Comment