Adding social media buttons to main menu, Skeptical Theme

• 

  howermj · Member · Apr 2, 2012 at 9:42 pm

  • Copy link
  • Add topic to favorites

  Looking to move social media links from a sidebar widget to menu. Using Skeptical theme w/custom CSS add on.

  Today, buttons for Twitter, Facebook, and Linked in are in widget. Want to move to top menu right after the word “Donate.”

  Tried to follow instructions here (http://clicksonlinemarketing.com/2011/06/how-to-use-wordpress-custom-menus-to-put-image-links-or-social-media-buttons-on-your-navigation-bar/) but no luck.

  site: http://spaatzassociation.wordpress.com

  As a noob with all things CSS, any help would be greatly appreciated.

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

• 

  designsimply · Member · Apr 4, 2012 at 8:00 pm

  • Copy link

  To move the text widget that you added from the top of the sidebar to the top right side of the header, try this:

  #content {
  position: relative;
  }
  
  #text-6 {
  position: absolute;
  display: block;
  top: -230px;
  right: 0;
  }

  Adjust the “top” value as necessary. Note that the “#text-6” selector is specific to your text widget. If you created a new text widget or if someone else is reading this as an example, you should make sure to use the correct selector.

• 

  howermj · Member · Apr 9, 2012 at 9:03 pm

  • Copy link

  Worked like a charm! I decided to move it into the menu, and slide the dropdown menu over using the code below:

  #content {
  	position:relative;
  }
  
  #text-6 {
  	position:absolute;
  	display:block;
  	top:-323px;
  	right:0;
  }
  
  #navigation {
  	float:right;
  	position:absolute;
  	left:500px;
  }
  
  #navigation ul.rss li {
  	float:right;
  	padding:0;
  }

• 

  howermj · Member · Apr 24, 2012 at 4:44 pm

  • Copy link

  ok…now I have a browser compatibility problem. The code above works great in IE, Chrome, and Safari but not in FF9. In FF9, the menu is moved all the way to the left.

  spaatzassociation.wordpress.com

  Any thoughts on how to fix this problem in one browser?

  v/r
  MJH

• 

  designsimply · Member · Apr 25, 2012 at 1:59 am

  • Copy link

  The float:right for #navigation and right:0 for #text-6 might be conflicting.

  Try removing this:

  #navigation {
  	float:right;
  	position:absolute;
  	left:490px;
  }
  
  #navigation ul.rss li {
  	float:right;
  	padding:0;
  }

  And adding this:

  #navigation {
  	margin-right: 137px;
  }

  Adjust the margin-right number until the position looks good to you.

• 

  howermj · Member · Apr 25, 2012 at 1:31 pm

  • Copy link

  Perfect!

  How do you find time to do all this….