- This topic has 20 replies, 2 voices, and was last updated 7 years, 4 months ago by Tom.
-
AuthorPosts
-
October 4, 2016 at 1:17 am #231878Yannick
Hi Tom,
I would like to use my own social icons which I have uploaded in my media library, add them to the navigation bar on the right side and make them a bit bigger than the rest of the menu links.
With FontAwesome I have html code, but with my own icons I only have an url or a filename.Is this possible?
Thank you! π
October 4, 2016 at 9:26 am #232067TomLead DeveloperLead DeveloperYou should just be able to add the image HTML to a custom link:
<img src="URL TO YOUR ICON" alt="" />
October 4, 2016 at 12:02 pm #232157YannickThank you so much!! You are the best, can’t say different π
October 4, 2016 at 4:10 pm #232247TomLead DeveloperLead DeveloperYou’re very welcome π
November 3, 2016 at 6:51 am #241362YannickHi,
One more question to this topic.When I hover over my FB-social icon it creates a white field around which is overlaying my other social icons, also the “link-field” is overlaying the link of the other social media icon, how can I reduce the “field size” of the icons so they are not interfering with each other?
http://www.amuddyroad.comBest wishes,
YannickNovember 3, 2016 at 10:44 am #241430TomLead DeveloperLead DeveloperGive this CSS a try:
.main-navigation .main-nav li.facebook-icon a { background: transparent !important; }
November 3, 2016 at 11:51 am #241458YannickThank you Tom!
This solves already the “white field” but when I click on the right side of the Insta icon it opens Facebook. There’s still a “field” left. Now it’s transparent but the Facebook link is still overlaying the Instagram link. Sorry, don’t know how to name my problem better.. hope you understand me πNovember 3, 2016 at 12:26 pm #241469TomLead DeveloperLead DeveloperJust updated the code above – can you give it a try? π
November 3, 2016 at 7:51 pm #241547YannickThank you Tom but the problem is still there. The Facebook link overlays the Instagram link.
November 3, 2016 at 8:02 pm #241548TomLead DeveloperLead DeveloperSeems fixed on this side – try clearing your browser cache.
November 3, 2016 at 9:37 pm #241555YannickI cleared my browser cache but it’s still there, the right half of the Instagram icon leads me to the Facebook link.
November 4, 2016 at 12:04 am #241563TomLead DeveloperLead DeveloperAh, that’s happening because of this CSS you have:
.facebook-icon { padding-top: 30px; margin-left: -30px; } .insta-icon { padding-top: 30px; margin-right: -30px; }
Instead, try something like this:
.main-navigation .main-nav li.facebook-icon a, .main-navigation .main-nav li.insta-icon a { padding: 0; }
November 4, 2016 at 12:54 am #241571YannickPerfect, Thank you!! π
November 4, 2016 at 1:22 am #241575YannickNow I adjusted everything in the way I like it
/*social-icons*/ .main-navigation .main-nav li.facebook-icon a { background: transparent !important; padding-right: 20px !important; /*Icon right side*/ } .main-navigation .main-nav li.insta-icon a { background: transparent !important; padding-left: 40px !important; /*Icon left side*/ } .main-navigation .main-nav li.facebook-icon a, .main-navigation .main-nav li.insta-icon a { padding: 0; padding-top: 20px !important; }
now the social media icons in the mobile menu are also “padded”
November 4, 2016 at 10:36 am #241713TomLead DeveloperLead DeveloperAwesome π
-
AuthorPosts
- You must be logged in to reply to this topic.