Adding CTA in navigation bar

Hi there, the easiest way to do this is add a menu item to your navigation, set the color for that particular menu item <a> element to transparent (each menu item has a unique CSS id class) and then add the image as a background to that element, or the parent <li> element.

I can’t see your site, so this example was worked up off the Sela demo site. The 449 number is from that site, and your menu item number will be different. You would replace URL_OF_IMAGE between the quote marks with the URL of the image from your media library.

#menu-item-449 a {
  color: transparent;
}
#menu-item-449 {
  background: url('URL_OF_IMAGE') no-repeat scroll center top / contain;
}

Hi there!

Thank you very much for your reply! I followed your instructions, but I propably did something wrong. Can you not see my website, because it is not live yet? I added this in the ‘extra CSS’ in the customizer. Do you have any idea what I am doing wrong?

And is it possible, that this call to action sents the visitor directly to an external landingspage? Then the page content of this new created menu item should not be visible.

I hope you understand what I mean, and thanks a lot for your help!

#menu-item-523 a {
color: transparent;
}
#menu-item-523 {
background: url(‘https://www.marketingbyels.nl/wp-content/uploads/CTA-demo.png’) no-repeat scroll center top / contain;
}

Hmmm, I checked again and it would not load the image. I’ve changed the single quote marks to double quote marks and it seems to be working now. Try this.

#menu-item-443 a {
  color: transparent;
}
#menu-item-443 a {
  background: url("https://www.marketingbyels.nl/wp-content/uploads/CTA-demo.png") no-repeat scroll center top / contain;
}

Hmm very strange, I added this below and it is still not working. Can I sent you the link to my website, when it is still offline?

#menu-item-523 a {
color: transparent;
}
#menu-item-523 a {
background: url(“https://www.marketingbyels.nl/wp-content/uploads/CTA-demo.png”) no-repeat scroll center top / contain;
}

If it is offline, I can’t see any of the content. What you can do is to wait until you have it live and then post here, or in another thread, and put my username in it and I can then take a look and get the code ironed out for you.

The above works on my test site with Sela, so I know the basics of it works. The only variable is the number (523) for the unique menu item CSS id.

Are you adding that at Customize > Additional CSS?

Thanks @sacredpath. Yes I am adding this in the additional CSS. I will contact you again when my website is live.

Great, let us know.