Using social media icons on navigation bar
-
Hi
I’ve created a sprite.png of four social media icons. I’ve created custom links in the menu (these appear in word form in the navigation bar, so all good there).
However, nothing I’ve tried seems to work as far as css code goes to use the social media icons in the sprite.png instead of the words Twitter, Facebook etc.
I’ve tried a few sprite generators to create the css code – but every time I’ve cut and pasted into my css panel, nothing works.
this is what I’m using at the moment:
.sprite { background: url(‘https://mealsourkidslove.files.wordpress.com/2015/03/socialmediaicons.png’) no-repeat top left; width: 24px; height: 24px; }
.sprite.facebook24 { background-position: 0 0; }
.sprite.pinterest24 { background-position: -29px 0; }
.sprite.twitter24 { background-position: -58px 0; }I’ve also tried using #menu-item and linking to each social media icon individually. This works fine – but then it creates too big a gap between the icons. Also Sela’s navigation bar has these dots separating each menu item and I really don’t want to go looking for the code for that.
My feeling is there’s an instruction missing at the beginning of all the code but I’m not sure what to use.
Thanks for your help.
The blog I need help with is: (visible only to logged in users)
-
I am not sure trying to use sprites is a good idea but you can get a social icons by either Adding a Social Links Menu (this is theme dependent) or Adding Social Media Buttons to Your Sidebar or Footer (can be added to any theme).
-
Thank you very much for your help. I tried that but the social media icons now appear in the footer. How do I get them to be in the navigation bar at the top of the page?
Thank you.
-
I am thinking the only way to have the icons in the navigation bar is to have them in the primary menu and overwrite wit CSS?
-
Which is your theme?
Looks like your social links menu got added to the footer. Or if you were using, the second link may be your text widget is in the footer.
If your theme does not support either social links menu or the text widgets in the header area, we will have to use CSS. But CSS solution depends on how you theme’s overall CSS is organized.
-
I’m using Sela and there is a social media menu – which I just tried (icon went in the footer).
-
this is Sela’s css style sheet for social media. is there something in there I can over-ride?
.social-links {
clear: both;
margin: 0 auto 1.5em;
}.social-links ul {
list-style: none;
margin: 0;
padding: 0;
}.social-links ul li {
display: inline-block;
list-style: none;
margin: 0;
}.social-links ul a {
display: inline-block;
text-decoration: none;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}.social-links ul a:before {
background: #f25f70;
color: #fff;
content: “f415”;
display: block;
font-size: 16px;
font-size: 1.6rem;
padding: 8px 6px 8px 8px;
position: relative;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: top 0.3s ease-in-out;
transition: all 0.1s ease-in-out;
}.social-links ul a:hover {
text-decoration: none;
}.social-links ul a:hover:before {
opacity: 0.75;
text-decoration: none;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}.social-links ul a[href*=”wordpress.org”]:before,
.social-links ul a[href*=”wordpress.com”]:before {
content: “f205”;
}.social-links ul a[href*=”facebook.com”]:before {
content: “f204”;
}.social-links ul a[href*=”twitter.com”]:before {
content: “f202”;
}.social-links ul a[href*=”dribbble.com”]:before {
content: “f201”;
}.social-links ul a[href*=”plus.google.com”]:before {
content: “f206”;
}.social-links ul a[href*=”pinterest.com”]:before {
content: “f209”;
}.social-links ul a[href*=”github.com”]:before {
content: “f200”;
}.social-links ul a[href*=”tumblr.com”]:before {
content: “f214”;
}.social-links ul a[href*=”youtube.com”]:before {
content: “f213”;
}.social-links ul a[href*=”flickr.com”]:before {
content: “f211”;
}.social-links ul a[href*=”vimeo.com”]:before {
content: “f212”;
}.social-links ul a[href*=”instagram.com”]:before {
content: “f215”;
}.social-links ul a[href*=”codepen.io”]:before {
content: “f216”;
}.social-links ul a[href*=”linkedin.com”]:before {
content: “f207”;
}.social-links ul a[href*=”/feed”]:before {
content: “f413”;
}.social-links ul a[href*=”mailto”]:before {
content: “f410”;
} -
Sela displays social icons only in the footer. We can configure social menu location in the nav bar but then Sela does not display social icons in the nav bar. So we will have to use CSS to overwrite the text in the nav bar to display social icons.
In either case, it would be nice to be able to access your site to come up with CSS.
-
thanks. Yes, I guess it’s about using css to move social media menu to the nav bar.
what do you need to access my site?
-
You can invite me to view your private blog. My WordPress.com user id is chaitanyamsv .
(I can get back only by my tomorrow night. It is already pretty late in the night here.)
-
-
Just make me the viewer. I don’t need any higher level privilege. I just need to view your site :-)
-
-
-
I looked at your site. You have other menu items that are not links to social profiles.
I think what you did with twitter icon is a good idea. You now just have to do it for rest of your social media profiles.
-
Thanks Chait.
The only problem with that is if I add Facebook, Pinterest etc – it will create a space between one with a dot in between – like how the other menu items appear. I would like all the social icons to be in a row together in the far right of the nav bar. So is it a case of over-riding the spacing and the use of the dot as a style?not sure what you mean by other menu items that are not links to social profiles?
-
-
Yeah please add one more icon and lets see how it comes about and I will try CSS to remedy it.
not sure what you mean by other menu items that are not links to social profiles?
I was referring to HOME, ABOUT US, BLOG, RECIPE BOOK, CONTACT menu items.
-
yes, I want those items on my nav bar – but I also want the social media icons on the far right of this nav bar.
I’ve just added the Facebook icon. See there’s a dot between.
-
- The topic ‘Using social media icons on navigation bar’ is closed to new replies.
WordPress.com Forums 