Buy me a coffee

Replace Navigation Item with Custom Icon

#1. First, you need to know this

replace-navigation-item-with-custom-icon-01-min

#2. Add these codes to the Custom CSS box and Save
Replace Pixabay with your icon urls

/* do not delete this code */
nav>div.header-nav-item>a, [data-folder="root"]>div>div>div a {
    color: transparent !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}
/* end - do not delete this code */

/* item 1 */
nav>div.header-nav-item:nth-child(1)>a, [data-folder="root"]>div>div>div:nth-child(1) a {
    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, [data-folder="root"]>div>div>div:nth-child(2) a {
    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, [data-folder="root"]>div>div>div:nth-child(3) a {
    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, [data-folder="root"]>div>div>div:nth-child(4) a {
    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, [data-folder="root"]>div>div>div:nth-child(5) a {
    background-image: url(https://cdn.pixabay.com/photo/2024/01/30/14/29/field-8542201_1280.jpg);
}

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