Custom icons on the nav bar

Site URL: https://bugle-poodle-kk7s.squarespace.com/

Hi all, 

I'm trying to work out if it's possible to change the navigation bar on Squarespace. I have .png icons and I want to use these instead of font in the nav bar. I.e. an image instead of the word "about" etc

Is this possible?

Yes. You need to use CSS. Set background image for each word with CSS. Then use CSS to transparent text.

Can you share link to your site?

That sounds perfect. Have added site name at top!

15 hours ago, rsmith2020 said:

That sounds perfect. Have added site name at top!

Your site is private...

On 2/26/2020 at 8:24 AM, tuanphan said:

Yes. You need to use CSS. Set background image for each word with CSS. Then use CSS to transparent text.

Can you share link to your site?

I'm looking to do the same thing as rsmith in this thread. Here's the site link:

https://tristanroberts.org/

I just want to change the "home" navigation text to a little house png

16 hours ago, 84372193095432-13 said:

I'm looking to do the same thing as rsmith in this thread. Here's the site link:

https://tristanroberts.org/

 

I just want to change the "home" navigation text to a little house png

I see you solved with this code?

#collection-62ab62c1699de46fe412e054 header .header-nav-item:nth-child(1) a {
    content: '';
    height: 20px;
    width: 10px;
    margin-top: 4px;
    background-image: url(https://static1.squarespace.com/static/608174210e261d4b9e49e62b/t/62b396b846b4dc02ae996fd8/1655936696842/house-chimney-solid+white.png);
    background-size: 20px;
    display: block;
    background-color: transparent;
    color: transparent;
    background-repeat: no-repeat;
    margin-right: -10px;
    margin-left: 0px
}

#collection-62b33a12eef23b5fe35fa3f9 header .header-nav-item:nth-child(1) a,#collection-60ae9e1f1095563f095e2bcf header .header-nav-item:nth-child(1) a,#collection-629657fc23979504598dab97 header .header-nav-item:nth-child(1) a,#collection-62b4c1377f0b1856df2a8f63 header .header-nav-item:nth-child(1) a {
    content: '';
    height: 20px;
    width: 10px;
    margin-top: 7px;
    background-image: url(https://static1.squarespace.com/static/608174210e261d4b9e49e62b/t/62b396b3e7006b54f8358c1f/1655936691477/house-chimney-solid.png);
    background-size: 20px;
    display: block;
    background-color: transparent;
    color: transparent !important;
    background-repeat: no-repeat;
    margin-right: -10px;
    margin-left: 0px
}

On 6/24/2022 at 12:10 PM, tuanphan said:

I see you solved with this code?

#collection-62ab62c1699de46fe412e054 header .header-nav-item:nth-child(1) a {
    content: '';
    height: 20px;
    width: 10px;
    margin-top: 4px;
    background-image: url(https://static1.squarespace.com/static/608174210e261d4b9e49e62b/t/62b396b846b4dc02ae996fd8/1655936696842/house-chimney-solid+white.png);
    background-size: 20px;
    display: block;
    background-color: transparent;
    color: transparent;
    background-repeat: no-repeat;
    margin-right: -10px;
    margin-left: 0px
}

#collection-62b33a12eef23b5fe35fa3f9 header .header-nav-item:nth-child(1) a,#collection-60ae9e1f1095563f095e2bcf header .header-nav-item:nth-child(1) a,#collection-629657fc23979504598dab97 header .header-nav-item:nth-child(1) a,#collection-62b4c1377f0b1856df2a8f63 header .header-nav-item:nth-child(1) a {
    content: '';
    height: 20px;
    width: 10px;
    margin-top: 7px;
    background-image: url(https://static1.squarespace.com/static/608174210e261d4b9e49e62b/t/62b396b3e7006b54f8358c1f/1655936691477/house-chimney-solid.png);
    background-size: 20px;
    display: block;
    background-color: transparent;
    color: transparent !important;
    background-repeat: no-repeat;
    margin-right: -10px;
    margin-left: 0px
}

 

Yes. Now i'm having another problem. I have a custom code block for an email signup form that i want multiple instances of on one same page. But I also want to be able to style them separately without affecting the original (everything has the same class so affecting one of the forms affects the other). Is there an easy way to give each block its own container div with its own id and then affect the style for that one id.  The code block is espcially long for the form I'm trying to style, and i dont want to have to put the unique id before every mention of a class because that would take forever. Its the block that says "Join team tristan" on this page https://tristanroberts.org/campaign . Theres two instance of this block if you scroll down and ive made a few changes by manually specifying new id before the class items for what I was affecting but id like an umbrella solution.

1 hour ago, 84372193095432-13 said:

Is there an easy way to give each block its own container div with its own id and then affect the style for that one id.

Each block has a unique id assigned by SS. Check out Heather Tovey's most excellent looking Squarespace ID Finder.