Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Changing navigation links to images


katep

Question

  • Answers 16
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular 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

16 answers to this question

Recommended Posts

  • 0

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

Link to post
  • 0

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

 

Link to post
  • 0
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 post
  • 0
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

Link to post
  • 0
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;
}

 

Link to post
  • 0
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 post
  • 0
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

Link to post
  • 0
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?

Link to post
  • 0
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!

Link to post
  • 0
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;
}

 

Link to post
  • 0
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 post
  • 0
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?

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...