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

Changing navigation links to images

Question

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! 

Share this post


Link to post

4 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


COVID-19: Free priority support for all users (29/03 - 30/04).

You can tag me (@tuanphan) or send to my email.

 

Share this post


Link to post
  • 0

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)?

Share this post


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

 


COVID-19: Free priority support for all users (29/03 - 30/04).

You can tag me (@tuanphan) or send to my email.

 

Share this post


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...