Jump to content

[Share] Replace Navigation Item with Custom Icon/Image

Recommended Posts

If code doesn't work, you can send link to your site + exact code you added, I can check problem easier.

To replace Navigation Item with custom icon, image, you can follow these steps.

#1. First, you need to know this

image.png.e1986f72fee22d5c6271cac24eaedbc4.png

#2. Use this code to Website Tools > Custom CSS

/* 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);
}

image.thumb.png.13223e9a3a5685ff4b68035de32aa7ef.png

#3. Result

image.png.a4fecaa328700a8cf2b725986a8b201e.png

#4. Follow this to find Image/Icon url

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 0
  • Views 344
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.