Jump to content

Changing navigation links to images

Recommended Posts

Add to Home > Design > custom CSS

.nav-item [href="/shop"] span:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: block;
}

Repeat this for other items. Replace /shop with other url slug

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

Edit above code to

.nav-item [href="/shop"] span {
	visibility: hidden;
}
.nav-item [href="/shop"] span:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: block;
	visibility: visible;
}

 

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
  • 1 year later...
On 3/22/2020 at 8:07 PM, tuanphan said:

Edit above code to


.nav-item [href="/shop"] span {
	visibility: hidden;
}
.nav-item [href="/shop"] span:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: block;
	visibility: visible;
}

 

Hi @tuanphan, does this could work for the links of a Folder? For example, if ive grouped my website's pages into 2 folders, could I use this code to replace the link of a folder with a logo/image? 

Thanks

Tom 

Link to comment
On 4/13/2021 at 3:45 AM, tommiatke said:

Hi @tuanphan, does this could work for the links of a Folder? For example, if ive grouped my website's pages into 2 folders, could I use this code to replace the link of a folder with a logo/image? 

Thanks

Tom 

Can you share link to your site? I can tweak code for folder easier

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
17 hours ago, tommiatke said:

Try this CSS

a.header-nav-folder-title[href="/cmf-folder"] {
    visibility: hidden;
}
a.header-nav-folder-title[href="/cmf-folder"]:before {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 30px;
    content: "";
    display: inline-block;
    visibility: visible;
    position: absolute;
}

 

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
  • 1 month later...
On 4/15/2021 at 3:39 PM, tuanphan said:

Try this CSS


a.header-nav-folder-title[href="/cmf-folder"] {
    visibility: hidden;
}
a.header-nav-folder-title[href="/cmf-folder"]:before {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 30px;
    content: "";
    display: inline-block;
    visibility: visible;
    position: absolute;
}

 

Any idea on how to make this work for navigation items that are external links?

Link to comment
On 5/19/2021 at 4:47 PM, TheLaunchRoom said:

Replace the whole text, I've got the image of the logo and 'in partnership with' ready to go.  Thanks!

Add to Design > Custom CSS

/* Replace nav link with image */
.header-nav-item a {
    background-image: url(https://cdn.pixabay.com/photo/2020/07/06/04/28/stone-shapes-5375372__340.jpg);
    background-size: 100px;
    display: block;
    height: 100px;
    color: transparent;
    background-repeat: no-repeat;
}

 

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
4 hours ago, tuanphan said:

Add to Design > Custom CSS


/* Replace nav link with image */
.header-nav-item a {
    background-image: url(https://cdn.pixabay.com/photo/2020/07/06/04/28/stone-shapes-5375372__340.jpg);
    background-size: 100px;
    display: block;
    height: 100px;
    color: transparent;
    background-repeat: no-repeat;
}

 

We've got the image but how to do we hide the existing text?

Link to comment
  • 1 year later...
On 3/22/2020 at 3:07 AM, tuanphan said:

Edit above code to

.nav-item [href="/shop"] span {
	visibility: hidden;
}
.nav-item [href="/shop"] span:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: block;
	visibility: visible;
}

 

Hi tuanphan
I've tried to implement this but it doesn't work. Can you please take a look at https://www.chc.works/?
I want the 'Marvin by CHC' nav link to display the image I uploaded

Link to comment
On 5/16/2023 at 6:18 AM, wearecreamsugar said:

Hi tuanphan
I've tried to implement this but it doesn't work. Can you please take a look at https://www.chc.works/?
I want the 'Marvin by CHC' nav link to display the image I uploaded

Use this CSS code

header#header [href="/marvin-by-chc"] {
    background-image: url(https://cdn.pixabay.com/photo/2023/05/08/11/18/hair-7978357_1280.jpg);
    color: transparent !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

 

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
  • 8 months later...

Website: www.cafe-club.squarespace.com

password: cafeclub

@tuanphan I'm trying to replace my main navigation links with a custom hand-drawn image instead of a font. I tried using the custom CSS provided above but nothing is happening. I uploaded the .png files to custom CSS and used this code:

 

.nav-item [href="/menu"] span {
    visibility: hidden;
}
.nav-item [href="/menu"] span:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/658da47d0f5cf817eeeb2f99/t/65b02581c6873a3f75bab162/1706042753513/CUISINE.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    visibility: visible;
}

 

Link to comment
On 1/24/2024 at 3:55 AM, HOMENCREATIVE said:

Website: www.cafe-club.squarespace.com

password: cafeclub

@tuanphan I'm trying to replace my main navigation links with a custom hand-drawn image instead of a font. I tried using the custom CSS provided above but nothing is happening. I uploaded the .png files to custom CSS and used this code:

 

.nav-item [href="/menu"] span {
    visibility: hidden;
}
.nav-item [href="/menu"] span:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/658da47d0f5cf817eeeb2f99/t/65b02581c6873a3f75bab162/1706042753513/CUISINE.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    visibility: visible;
}

 

Use this code

header#header [href="/menu"] {
    background-image: url(https://static1.squarespace.com/static/658da47d0f5cf817eeeb2f99/t/65b02581c6873a3f75bab162/1706042753513/CUISINE.png);
    color: transparent !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

image.png.747304932622bef27609e4615c325358.png

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
  • 2 weeks later...

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.