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 8
  • 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

8 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

Create an account or sign in to comment

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


×
×
  • Create New...