Changing navigation links to images

Site URL: http://katepullendraws.com

Hello! I was wondering if someone could help me change my navigation links to images? I have a hand-lettered logo, and so wanted all my navigation to represent a similar style. My site: katepullendraws.com. Thank you! 

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

Thanks so much! Is there anyway I can get just the image to show, instead of the standard navigation (at the moment it sits on top)?

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;
}

Thanks so much!

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 

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

6 hours ago, tuanphan said:

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

Hi @tuanphan, Sure! 
https://bellflower-jaguar-h6pd.squarespace.com/
Password: cm

17 hours ago, tommiatke said:

Hi @tuanphan, Sure! 
https://bellflower-jaguar-h6pd.squarespace.com/
Password: cm

 

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;
}

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?

23 hours ago, TheLaunchRoom said:

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

Can you share site url? We can check class name easier

6 hours ago, tuanphan said:

Can you share site url? We can check class name easier

ultimatetintingcheshire.co.uk (want to replace 'Ginger Graphics' nav link to a logo)

17 hours ago, TheLaunchRoom said:

ultimatetintingcheshire.co.uk (want to replace 'Ginger Graphics' nav link to a logo)

Replace whote text "In partnership with GINGER GRAPHICS" or "GINGER GRAPHICS" only?

7 minutes ago, tuanphan said:

Replace whote text "In partnership with GINGER GRAPHICS" or "GINGER GRAPHICS" only?

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

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;
}

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?

20 hours ago, TheLaunchRoom said:

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

I think the code should hide the text. It doesn't work?

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

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;
}