Add facebook icon to the access bar in Twenty Eleven

isabelashdown · Member · Jan 15, 2014 at 9:27 am
Copy link

Add topic to favorites
Is it possible to add a ‘like’ or ‘follow’ facebook button to the access bar? I use a one column Twenty Eleven theme with css, and the social network widgets in the footer can get missed.
Thanks for any help!

The blog I need help with is: (visible only to logged in users)
raincoaster · Member · Jan 15, 2014 at 9:30 am
Copy link
The access bar? You mean the grey Admin bar at the top of all WP.com pages? No, that is not possible. Do you mean the page tabs or header? Yes, that’s possible.
isabelashdown · Member · Jan 15, 2014 at 9:36 am
Copy link
I mean the bar containing the page tabs, but if it’s possible to do it with the header that would also be a good option – it would be good to know how to do it for both so I have the choice.
Many thanks raincoaster.
raincoaster · Member · Jan 15, 2014 at 10:00 am
Copy link
The bar containing the page tabs IS the header bar. Use a Custom Menu http://en.support.wordpress.com/menus/
isabelashdown · Member · Jan 15, 2014 at 10:41 am
Copy link
This is great thank you. Do you know if it’s possible to also include images in the custom menu ie a facebook logo?
shaunandrews · Staff · Jan 15, 2014 at 5:42 pm
Copy link
Hi Isabel,

You can use the Custom Design upgrade to add some CSS to your site that will add a Facebook and Twitter icon to your menu. Here’s a quick example:
```
#menu-item-5191 a {
background-image: url("https://www.facebookbrand.com/img/assets/asset.f.logo.sm.png");
background-repeat: no-repeat;
background-size: 25px;
background-position: 15px 50%;
padding-left: 50px;
}

#menu-item-5194 a {
background-image: url("https://i.cloudup.com/8FFqb7sbZb.png"); 
background-size: 30px;
background-repeat: no-repeat;
background-position: 15px 50%;
padding-left: 50px;
}
```
In the CSS above, the #menu-item- is the ID of the menu item in question. The first one is the Facebook menu item (5191), and the second one is the Twitter menu item (5194). The code adds a background image to the menu item, and then adds some padding to the left to make room for the image. Here’s a example of what it would look like: https://cloudup.com/cmf4eHuDRF7

Please note, you should upload the images to your site’s media library and reference them there, rather then using the example image URL’s I’ve provided above.

I hope this helps!
isabelashdown · Member · Jan 15, 2014 at 7:21 pm
Copy link
Genius shaunandrews! Thanks so much – this is just what I was looking for. Very best wishes, Isabel
stephenbass1 · Member · Feb 23, 2014 at 3:30 pm
Copy link
I am having the same issue. I put this text in my ccs customization on the front page but nothing showed. Am I supposed to put this text somewhere else besides the CCS customization window?

Thanks

Stephen
thesacredpath · Member · Feb 24, 2014 at 3:59 am
Copy link
Hi Stephen, I see a Custom Design upgrade associated with the-life-study.org site, but that site is using a different theme (Expound) and would also have different menu ID numbers, so the solution for Twenty Eleven discussed here will not work for you, but we can help with that.

Since you are using a different theme, can I ask you to create a new thread in the CSS forum to prevent confusion for those coming to this thread in the future? Many thanks in advance, and I’ll watch for your new posting.
stephenbass1 · Member · Feb 24, 2014 at 4:47 pm
Copy link
Thank you sacredpath! Will do now.
thesacredpath · Member · Feb 25, 2014 at 4:51 am
Copy link
You are welcome.

No items found.