Making Menu Items Images

countdowntofridayblog · Member · Aug 10, 2016 at 3:34 pm
Copy link

Add topic to favorites
I would like to try and make some of my custom links in my menu into icons/images…specifically social icons.
For example I have Facebook as a menu item with a custom link, but would like to have the Facebook ‘F’ there instead. Same for Bloglovin, Pinterest, and Instagram.

I have the Dyad theme.

Thanks.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 10, 2016 at 7:30 pm
Copy link
This is a reasonably easy thing to do. We can use the icons, like in the right of your footer, or we can use images of your choice. Once you find your icons, upload them to your media library and we can help work out the code for you. I see you have some custom CSS going already, so I’ll offer the following if you wish to attempt it on your own. What I have done is to inspect your instagram menu item and find the unique menu item class for it. I then added the background image and set a few other things. In the second rule, I changed the color of the text in that menu item to transparent and set it to “display: block;”.
```
.menu-item-1372 {
    background-image: url("URL_OF_IMAGE");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.menu-item-1372 a {
    color: rgba(0, 0, 0, 0) !important;
    display: block;
}
```
You can use the above as a guide for the others, and if you have problems or questions, just let me know.
countdowntofridayblog · Member · Aug 10, 2016 at 8:40 pm
Copy link
Thanks so much! I was able to use the CSS you gave me to edit it for all of my menu links. Proud moment for me…first time I edited something in CSS by myself.

After editing I have a follow on question…everything looks great on my homepage, but when I click on a post the bar where my menu links are is somewhat transparent, and you can see the white space in the images I used for my links. Can I change that transparent bar to be opaque white to eliminate this? Or is there another solution?
thesacredpath · Member · Aug 16, 2016 at 5:52 pm
Copy link
Hi and sorry this got lost. The following CSS will make the menu area solid white on single post pages.
```
.single .site-header {
    background: #fff;
}
```
countdowntofridayblog · Member · Aug 16, 2016 at 6:23 pm
Copy link
Thanks so much! What would I do without Happiness Engineers?!
thesacredpath · Member · Aug 16, 2016 at 6:45 pm
Copy link
You are welcome, and thanks for the compliment. :)

No items found.