In this post, we will share some custom code (CSS) to add a slash “/” between Navigation Items in Squarespace 7.0 and Squarespace 7.1.

Notes

1. All CSS should be insert to Home > Design > Custom CSS. See how to insert CSS

2. If you want to apply for only desktop or mobile, use this

/* Only Table - Desktop */
@media screen and (min-width:641px) {
Paste CSS here
}
/* Only Mobile */
@media screen and (max-width:640px) {
paste custom CSS here
}

3. Send me a message or comment below if the code doesn’t work on your site

4. Some templates do not have code, because I think they are not suitable for slash

Adirondack

N/A

Avenue

.main-nav ul li:not(:last-child) a:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Aviator

nav#main-navigation ul li:not(:last-child) a:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Bedford: Anya, Bedford, Bryant, Hayden, Bedford

#mainNavigation>div:not(:last-child)>a:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}
/* For dropdown menu */
#mainNavigation .folder-toggle:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Brine: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine.

.Header-nav-item:not(:last-child):after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}
/* Dropdown Items */
.Header-nav-folder-title:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Farro: Farro, Haute

Same as Brine

Five

nav#main-navigation>ul>li:not(:last-child)> a:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}
/* For dropdown menu */
nav#main-navigation .folder-toggle:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Flatiron

ul#nav>li:not(:last-child)>a:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Forte

#topNav .main-nav ul li:not(:last-child) a span:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Galapagos

N/A

Ishimoto

#topNav #nav>li:not(:last-child)>a:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Momentum

#topNav .main-nav ul>li:not(:last-child) a:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Montauk: Julia, Kent, Montauk, OM

Same as Momentum

Native

#navBlock .main-nav ul>li:not(:last-child) a:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Pacific:  Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific

#mainNavigation>div:not(:last-child)>a:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Skye: Foundry, Indigo, Ready, Skye, Tudor

No need

Supply

No need

Tremont: Camino, Carson, Henson, Tremont

#mainNavigation>div:not(:last-child)>a span:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Wells

No need

Wexley

#topNav .main-nav ul>li:not(:last-child) a:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

York: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York

.site-navigation>div:not(:last-child)>a span:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}

Squarespace 7.1

.header-nav-item:not(:last-child) a:after {
    content: " /";
    color: red;
    font-family: monospace;
    font-size: 20px;
}