social icons on nav bar
-
I looked for some thread on adding social icons to the right of navigation bar that change color from red to black on hover, do i need red and black icons to add 2 images to the css and also what css would I need to add, and the process of doing this? I have just added a facebook custom link but this needs to be the facebook icon that changes from red to black upon hover..
I have tried to find similar css on other threads but nothing worked ..Thank you so much in advance!
The blog I need help with is: (visible only to logged in users)
-
Yes, you would need two images, exactly the same size, one in the regular color, and one in the hover color for each of the social icons. The one for the regular (non-hover) you would put into the first rule below where it says, URL_OF_IMAGE between the double quote marks. You would do the same for the hover image in the second rule. You need to create rules for each menu item with the social links, and you have to specifically target those menu items by menu item ID (183 in the case of FB). You can find the menu ids by looking in the source code in the navigation section, or by using he web inspector tool built into your browser. We have some brief screencasts on How to Find Your Theme’s CSS.
#menu-item-183 a { background: url("URL_OF_IMAGE") no-repeat scroll center center rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0); } #menu-item-183 a:hover { background: url("URL_OF_IMAGE") no-repeat scroll center center rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0); }Here are the menu ID selectors you will need to use:
Facebook: #menu-item-183
Instagram: #menu-item-211
Twitter: #menu-item-213
Tumblr: #menu-item-214 -
Hi,
I have done this thank you but looks a little weird the spacing is off and on hover the text comes up ..how do I remedy this? ( and have the icons next to each other aligned right of the nav bar?)
Thank you in advance
-
-
Hi, add the following at the end of your custom CSS to take care of the errant FB gap. :)
nav[role="navigation"] li#menu-item-183 { margin-right: 5px; } -
Hmmm now I am stuck ..The problem I have on hover is you can see the facebook title come up, I think this may be why the icons look so far apart?
-
Hmmm, on the hover color declaration, we will have to use a hammer. Add the important attribute like this to all the color declarations on the hover rules:
color: rgba(0, 0, 0, 0) !important; -
I added this but it is still hovering and showing the titles
this is the code I put below..#menu-item-183 a {
background: url(‘http://placeholder2013gg.files.wordpress.com/2013/10/facebook3.png’) no-repeat scroll center center rgba(0,0,0,0);
color: rgba(0,0,0,0);
}#menu-item-183 a:hover {
background: url(‘http://placeholder2013gg.files.wordpress.com/2013/10/red-facebook2.png’) no-repeat scroll center center rgba(0,0,0,0);
color: rgba(0,0,0,0);!important;
}#menu-item-211 a {
background: url(‘http://placeholder2013gg.files.wordpress.com/2013/10/instagram1.png’) no-repeat scroll center center rgba(0,0,0,0);
color: rgba(0,0,0,0);
}#menu-item-211 a:hover {
background: url(‘http://placeholder2013gg.files.wordpress.com/2013/10/red-intsagram1.png’) no-repeat scroll center center rgba(0,0,0,0);
color: rgba(0,0,0,0);!important;
}#menu-item-213 a {
background: url(‘http://placeholder2013gg.files.wordpress.com/2013/10/twitter2.png’) no-repeat scroll center center rgba(0,0,0,0);
color: rgba(0,0,0,0);
}#menu-item-213 a:hover {
background: url(‘http://placeholder2013gg.files.wordpress.com/2013/10/red-twitter2.png’) no-repeat scroll center center rgba(0,0,0,0);
color: rgba(0,0,0,0);!important;
}#menu-item-214 a {
background: url(‘http://placeholder2013gg.files.wordpress.com/2013/10/tumblr2.png’) no-repeat scroll center center rgba(0,0,0,0);
color: rgba(0,0,0,0);
}#menu-item-214 a:hover {
background: url(‘http://placeholder2013gg.files.wordpress.com/2013/10/redtumblr1.png’) no-repeat scroll center center rgba(0,0,0,0);
color: rgba(0,0,0,0);!important;
} -
I’m not seeing the !important attributes on the hover color rules in your CSS. When I added it to your CSS at Appearance > Customize > CSS in your dashboard, the text went away on hover.
-
hmmm, sorry I am not very good lol…where do I add this?
above i added the important at the end of the css on each menu item that had the hover css did i do it wrong?What does the css need to look like? ( thank you so much for your help by the way..)
-
No worries. You have a semi colon between the ) and the !. Take those out so it looks like this with the single semicolon after !important
color: rgba(0, 0, 0, 0) !important; -
Thank you :)
One last question how can I get them to sit next to each other like 2 pixels apart and align right? ( Sorry tehe.. )
-
-
You need to add the following to the non-hover and hover rules for each of the menu items. The vary somewhat, so make sure and get them on the correct menu item ID rules.
Facebook (183)
letter-spacing: -4px; width: 30px;Instagram (211)
letter-spacing: -4px; width: 30px;Twitter (213)
letter-spacing: -2.5px; width: 30px;Tumblr (214)
letter-spacing: -3px; width: 30px;And add the following additional rule to space them closer and align them to the right side.
#menu-item-183, #menu-item-211, #menu-item-213, #menu-item-214 { margin-left: 0; margin-right: 8px; float: right; }
- The topic ‘social icons on nav bar’ is closed to new replies.
WordPress.com Forums 