Jump to content
Sign in to follow this  
marklaurence6275

Adding Custom Social Media Icon to Menu

Recommended Posts

I'm trying to add a fourth social media icon to: http://www.valleypropertyimaging.com

I was using:

 

.menu-thumbtack {
	text-indent: -9999px;
	background-image: url(http://www.valleypropertyimaging.com/wp-content/uploads/2018/05/thumbtack.png) !important;
	background-repeat: no-repeat !important;
	margin-left: 4px !important;
	width: 50px;
}

but I can't get the actual image to line up with the container.  Also, I tried variations on the "no-repeat" tag and it either repeats or vanishes entirely.

Share this post


Link to post
Share on other sites

The width and height of the element should be 36px to match the image, but you've set the width to 50 and haven't given it a height. You can move the image if necessary using the background-position property, but the image is the correct size, so that shouldn't be necessary. You should keep the no-repeat rule because you don't want the image to repeat.

Share this post


Link to post
Share on other sites

Hmm,

.menu-thumbtack {
	text-indent: -9999px;
	background-image: url(http://www.valleypropertyimaging.com/wp-content/uploads/2018/05/thumbtack.png) !important;
	background-repeat: repeat-no !important;
	margin-left: 3px !important;
	width: 36px;
  height: 36px;
}

So that's exactly what I put in and the attached image is what I see. I can't get the background-image to appear over the container. When I adjust the width to, say, 50, just to play with it, the background-image is right next to it and is repeating.

Image.png

Share this post


Link to post
Share on other sites

I can't tell what's going on there from just a screenshot. My  guess is that something else is creating a black circle which is covering your background image.

Share this post


Link to post
Share on other sites

Like I said, there probably is an element with the exact shape of a black circle that is covering up your background image. I'm going to take a stab in the dark and suggest using this code:

.social-menu .menu-item a {
  background: none;
}

You really should open the developer tools (by pressing F12 in most browsers) and look at the elements for yourself to see what they're doing. You haven't provided me with enough information so all I can do is make guesses. I don't know what HTML structure you're using to add the new icon, which is the most important part.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×