Buy me a coffee

Add custom icon before Navigation Item

Suppose you want to add icons before these items

2-rows-navigation-05-min

Just add this code to the Custom CSS box.
Replace Pixabay with your icon URL.

/* do not delete this code */
nav>div.header-nav-item>a:before, [data-folder="root"]>div>div>div a:before {
    content: "";
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    display: inline-block;
    width: 30px;
    height: 30px;
}
/* end - do not delete this code */

/* item 1 */
nav>div.header-nav-item:nth-child(1)>a:before, [data-folder="root"]>div>div>div:nth-child(1) a:before {
    background-image: url(https://cdn.pixabay.com/photo/2024/01/22/16/33/pelican-8525794_1280.jpg);
}
/* item 2 */
nav>div.header-nav-item:nth-child(2)>a:before, [data-folder="root"]>div>div>div:nth-child(2) a:before {
    background-image: url(https://cdn.pixabay.com/photo/2023/12/28/19/14/boy-8474750_1280.jpg);
}
/* item 3 */
nav>div.header-nav-item:nth-child(3)>a:before, [data-folder="root"]>div>div>div:nth-child(3) a:before {
    background-image: url(https://cdn.pixabay.com/photo/2024/01/14/23/11/siamese-crocodile-8509003_1280.jpg);
}
/* item 4 */
nav>div.header-nav-item:nth-child(4)>a:before, [data-folder="root"]>div>div>div:nth-child(4) a:before {
    background-image: url(https://cdn.pixabay.com/photo/2023/06/18/12/02/landscape-8071910_1280.jpg);
}
/* item 5 */
nav>div.header-nav-item:nth-child(5)>a:before, [data-folder="root"]>div>div>div:nth-child(5) a:before {
    background-image: url(https://cdn.pixabay.com/photo/2024/01/30/14/29/field-8542201_1280.jpg);
}

And you will have a result like this

add-custom-icon-before-navigation-item-02-min

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder