social media buttons on navigation bar

• 

  ozarkage · Member · Jun 27, 2013 at 4:19 pm

  • Copy link
  • Add topic to favorites

  I’m using the Forever theme.

  I was wondering if anyone knew how to get social media buttons into my nav bar.

  The blog I need help with is: (visible only to logged in users)

• 

  raincoaster · Member · Jun 27, 2013 at 5:06 pm

  • Copy link

  Into your nav bar? You mean a tabbed header? Use a custom menu.

• 

  ozarkage · Member · Jun 27, 2013 at 5:54 pm

  • Copy link

  Use a custom menu.

  I can link to our fb page by adding it to the menu structure, but can I have an img instead of text?

• 

  designsimply · Member · Jun 28, 2013 at 8:06 pm

  • Copy link

  You can use a CSS image replacement technique for this. To do it, first you’ll need to look at the HTML for your custom menu items and find the “id” value for each menu item you’d like to update.

  For example, right-click on “facebook” in your menu and select the “Inspect Element” option. That should pull up a panel showing the HTML of the thing you clicked on as well as all the CSS that applies to it. In this case, your facebook menu item has id=”menu-item-290″ and here is some example CSS that uses that int he selector line to replace the text with an image:

  #page #access li#menu-item-290 a,
  #page #access li#menu-item-290:hover > a {
  	background: #fff url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) no-repeat;
  	width: 32px;
  	height: 32px;
  	text-align: left;
  	text-indent: -9999px;
  }

  I used a WordPress logo as the image. You can upload a different image to your media library, copy the image link, and replace the url() value in the example above with the new link. You should also update the width and height values to match your image size.

  To repeat the same thing for other menu items you create, use this example as a guide and replace the “menu-item-290” part as well as the url() value for each one and add the updated CSS to your Appearance → Themes → Customize → CSS panel.

• 

  ozarkage · Member · Jun 29, 2013 at 3:52 pm

  • Copy link

  @designsimply

  thank you!

• 

  ozarkage · Member · Jun 29, 2013 at 6:41 pm

  • Copy link

  When I try to repeat the same thing for other menu items do I use this:

  #page #access li#menu-item-290 a,
  #page #access li#menu-item-290:hover > a {
  	background: #fff url('http://zuzuspetalsandgifts.files.wordpress.com/2013/06/facebook.png?w=33') no-repeat;
  	width: 33px;
  	height: 33px;
  	text-align: left;
  	text-indent: -9999px;
  	background: #fff url('http://zuzuspetalsandgifts.files.wordpress.com/2013/06/twitter.png?w=33') no-repeat;
  	width: 33px;
  	height: 33px;
  	text-align: left;
  	text-indent: -9999px;

  This code covers up what I did before it. Help?

• 

  designsimply · Member · Jul 1, 2013 at 5:41 pm

  • Copy link

  It looks like you skipped the step where you find the menu “id” value. To make a 2nd example work, you need to copy the entire rule, including the selectors at the beginning (those are the ones where you need to change the menu-item-### id values) and adjust both the url() value and the #menu-item-290 part for the next menu item. Try changing this:

  #page #access li#menu-item-290 a,
  #page #access li#menu-item-290:hover > a {
  	background: #fff url('http://zuzuspetalsandgifts.files.wordpress.com/2013/06/facebook.png?w=33') no-repeat;
  	width: 33px;
  	height: 33px;
  	text-align: left;
  	text-indent: -9999px;
  	background: #fff url('http://zuzuspetalsandgifts.files.wordpress.com/2013/06/twitter.png?w=33') no-repeat;
  	width: 33px;
  	height: 33px;
  	text-align: left;
  	text-indent: -9999px;

  To this:

  #page #access li#menu-item-290 a,
  #page #access li#menu-item-290:hover > a {
  	background: #fff url('http://zuzuspetalsandgifts.files.wordpress.com/2013/06/facebook.png?w=33') no-repeat;
  	width: 33px;
  	height: 33px;
  	text-align: left;
  	text-indent: -9999px;
  }
  #page #access li#menu-item-311 a,
  #page #access li#menu-item-311:hover > a {
  	background: #fff url('http://zuzuspetalsandgifts.files.wordpress.com/2013/06/twitter.png?w=33') no-repeat;
  	width: 33px;
  	height: 33px;
  	text-align: left;
  	text-indent: -9999px;
  }

  See how #menu-item-290 changed to #menu-item-311 ?

• 

  ozarkage · Member · Jul 6, 2013 at 3:40 pm

  • Copy link

  Okay great. I got it now. Thanks again for your help.

• 

  designsimply · Member · Jul 8, 2013 at 3:55 pm

  • Copy link

  Very cool!