In this post, i will share some custom code to change Navigation Link to Button

Notes

• Add !important to after if the code doesn’t work. Eg: color: red !important;
• Add code to Home > Design > Custom CSS
• Send me a message if you have any questions/the code doesn’t work.

To change Navigation Link to Button, you need to specifically target the Navigation Link. There are 2 ways to do this

• Use :nth-child(1), :nth-child(2), :nth-child(3)…. (you can also use :first-child & :last-child for first & last Navigation Link)
• Use a[href=”/page-url”]

Avenue

#topNav nav ul li:last-child a {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
#topNav nav ul li a[href="/blog-avenue"] {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

Aviator

nav#main-navigation ul li:last-child a {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
#topNav nav ul li a[href="/about-aviator"] {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

Bedford: Anya, Bedford, Bryant, Hayden, Bedford

#mainNavigation div:nth-child(3) a {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
#mainNavigation div a[href="/about-bedford"] {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

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:last-child {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
.Header-nav-item[href="/about-brine"] {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

Farro: Farro, Haute

Same as Brine

Five

Same as Aviator

Flatiron

ul#nav li:last-child a {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
ul#nav li:last-child a[href="/prints-flatiron"] {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

Forte

#topNav ul li:last-child a span {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
#topNav ul li a[href="/readme-forte"] span {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

Ishimoto

#topNav #nav li:last-child a {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
#topNav #nav li a[href="/blog-ishimoto"] {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

Momentum

#topNav ul li:last-child a {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
#topNav ul li a[href="/blog-momentum"] {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

Montauk: Julia, Kent, Montauk, OM

Same as Momentum

Native

#navBlock ul li:last-child a {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
#navBlock ul li a[href="/blog-native"] {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

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

#mainNavigation div:last-child a  {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
#mainNavigation div a[href="/readme-pacific"] {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

Skye: Foundry, Indigo, Ready, Skye, Tudor

.nav-blocks-wrapper div:last-child a span  {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
.nav-blocks-wrapper div a[href="/readme-skye"] span {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

Tremont: Camino, Carson, Henson, Tremont

#mainNavigation div:nth-child(2) a span  {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
#mainNavigation div a[href="/about-tremont"] span {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

Wells

div#topNav ul li:last-child a  {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
div#topNav ul li a[href="/about-wells"] {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

Wexley

Same as Wells

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

.site-navigation div:nth-child(2) a span  {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
.site-navigation div a[href="/about-york"] span {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

Squarespace 7.1

.Header-nav-item:last-child {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}
.Header-nav-item[href="/about-brine"] {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

If you have any questions, just comment below or send me a message