How to Add a Slash “/” between Navigation Items

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

Share this post:

If you have any questions, just fill in form below

Each FREE/PAID option will have different priorities.
If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Posted in