Jump to content

Custom icons on the nav bar

Recommended Posts

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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 years later...
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
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment

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.