Adding Social Media Icons to Menu in Expound
-
Hi All,
I bought the custom upgrade a couple of weeks ago and have been trying to learn some CSS. I’ve managed a few small changes, but I’m having a problem adding Facebook and Twitter icons to the nav bar in place of text. I’ve read several threads/sites about this issue, including this one:
I plugged in the correct menu IDs and added in the Genericons code (I like the all white icons), but it doesn’t work. Ideally, I’d like to make the icons right justified as well.
Thanks so much! My site is http://wearethemutants.com/.
The blog I need help with is: (visible only to logged in users)
-
Hi there.
You can use @thesacredpath trick, but as he says there
Also, your menu item ID will be different, so the “512” will have to change.
Your could use it, but putting your very own menu item selector instead of #menu-item-512. That means in your case menu-item-381 for facebook and menu-item-382 for twitter.
What about the colors to use? In @thesacredpath’s code there are two colors: #FFFFFF and #A8A9EA; (So white background and light purple background on hover). You can choose your best fit, using this table http://www.javascripter.net/faq/rgbtohex.htm and then, just adapt those statements with your preferred values. For instance, if you would like red background on hover for your twitter link:
#menu-item-382 a:hover:before { color: #FF0000; }I hope I have explained it clearly :)
-
Thanks! I have tried using the following code, plugging in my menu IDs:
#menu-item-381 a:before {
content: ‘f203’;
font-family: Genericons;
color: #FFFFFF;
font-size: 23px;
}
#menu-item-381 a {
font-size: 0;
}
#menu-item-381 a:hover:before {
color: #A8A9EA;
}#menu-item-382 a:before {
content: ‘f202’;
font-family: Genericons;
color: #FFFFFF;
font-size: 23px;
}
#menu-item-382 a {
font-size: 0;
}
#menu-item-382 a:hover:before {
color: #A8A9EA;
}As you can see, I just get two blobs instead of icons. Not sure where I’m wrong.
-
Hi there.
I’ve been more than an hour trying to fix that and I’m struck: I can’t understand it :/
I put modlook tag to this.
-
Hi again!
Apparantly that has something to do with the main page and categories page, as if you visit posts (Ex: http://wearethemutants.com/2016/03/07/a-thief-among-us-ethics-in-first-edition-advanced-dungeons-dragons/) you can see that icons working!
Something to do with: https://en.forums.wordpress.com/topic/missing-genericons-on-adelle-theme?replies=27 ?
Sorry for not being able to help here :(
-
Well, they look great on the posts pages! I hope I can get them to show up on the main page.
Thanks for looking into this for me.
-
@2w2n, what is happening is the Genericon font is loading selectively based on the settings at Settings > Sharing. Go to https://wearethemutantsdotcom.wordpress.com/wp-admin/options-general.php?page=sharing scroll down and check all four boxes under “Show buttons on” and save and they should then show up in the menus on all pages.
If you wish to not have the sharing buttons show at the bottom of the content on static pages, such as on your about page, we can hide those with CSS.
-
Thanks so much, @thesacredpath! I would like to hide the sharing buttons at the bottom of every page except the actual posts, if possible.
And is there a way to center the text/icons between the top and bottom of the nav bar?
Thanks again.
-
Thanks for the clarification. The following will hide the sharing from the bottom of static pages (about, etc.) and also from archive type pages (date archive, category and tag pages).
.page div.sharedaddy, .archive div.sharedaddy { display: none; } -
Thank you! Is there a way to center the text/icons in the nav bar? I managed to increase the margin on the bottom, but I’d like to keep the nav bar the same size if I can.
-
Also, not sure what happened, but this morning the Facebook and Twitter icons stopped showing up on the menu. There are just boxes with the Genericon text code inside.
-
The following will center the menu on 601px and wider screens. At 600px and narrower the touch menu becomes active and we will want to leave that with the original design.
@media screen and (min-width: 601px) { .navigation-main { text-align: center; } .navigation-main ul { display: inline-block; height: 40px; } } -
Hmmm, strange on the icon issues. Let me do some testing and checking into this and see if I can figure out what has happened.
-
Thanks. I don’t think I changed any settings. This is what the icons looked like before I clicked “show buttons on” under Sharing, except now the icons don’t show up on the posts either.
-
Well, this is certainly crazy-making. I’m contacting our developers again on this. Did you by any chance make any changes in your publicize settings at My Sites > Configure > Sharing?
-
Nope. I changed the appearance of the sharing buttons on http://2warpstoneptune.com/, but that was after the social media icons disappeared on http://wearethemutants.com/.
When I went to bed, icons were there. When I woke up, they were gone!
-
Well, there’s your problem, never go to bed. :)
Hopefully we will have this fixed shortly. I’m waiting for the developer to get back in. It may be a few hours.
-
-
- The topic ‘Adding Social Media Icons to Menu in Expound’ is closed to new replies.
WordPress.com Forums 