Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 60: How to add social media icons to the Thesis 2 nav menu

Thesis 2 Nav Menu with Social Media Icons

I would like to tighten up my sidebar to make room for ads and other items.  To do this, I’m going to add my social media icons to the Thesis 2 nav menu.  This will free up nearly 100 pixels of height in my sidebar.

How to add social media icons to the Thesis 2 nav menu

I would like to pull some of my sidebar items up closer to the top of the page.  Some of these items are ads or affiliate links that help me to pay for this site, so I want them to be very visible.

My current sidebar looks like the image below.  Notice that the first affiliate link is barely visible.  This screenshot is from a 14″ laptop.  Visible area will vary based on screen size and resolution.

Current Sidebar Layout

This step will have some actions in common with Step 59 where we learned how to add icons to the Thesis 2 nav menu.  One of the differences is that we will use external links, links to our social media, as nav menu options.

Navigate from the WordPress Dashboard > Appearance > Menus.

We will use external links in the nav menu.  These links will be for our social media sites such as Google+ and Twitter.  Find the “Custom Links” box on the Menus screen.

WordPress Menus Custom Links

Next, copy the link to your Google+ profile.  You’re on Google+, right?  Paste the link in the URL field and give it a label.

Google Plus in WordPress Nav Menu

Click the “Add to Menu” button and you will see the new item added to the nav menu you created in Step 14.

Google Plus in Nav Menu

Repeat this exercise for each of your other social media sites as well as your email newsletter and RSS feed if desired.  My menu now looks like this (see below).  Be sure to click the “Save Menu” button.

WordPress nav menu with social media icons

If we look at our site now we see the typical text menu items.

WordPress Menu with social media options

Now we need to imitate Step 59 and add icons to these menu items.  The difference is, we want to hide the text and only show the icons.

On your homepage perform a right-click and select the “View page source” option.  Look for your menu and find the menu items for the newly added social media links.

Browser View Source for WordPress Nav Menu

Next, navigate to the Thesis 2 Images page and upload your social media icons.  These should be the same as Step 33.

Thesis 2 Images Page

Now we need to add some CSS to place the icons where we want them.  I added the CSS below to the Thesis 2 Custom CSS tab.

Thesis 2 Custom CSS Nav Menu Icons

The full CSS can be copied from below.

/* Right justify social media icons in nav menu */
#menu-item-1558 a {
float: right;
text-indent: -9999px;
display:block; 
padding-left:34px; 
outline:none; 
background-image:url('images/thrifty_zizel_rss.png'); 
background-repeat: no-repeat;
background-position:center center;
}
#menu-item-1558 {
float: right;
}
#menu-item-1557 a {
float: right;
text-indent: -9999px;
display:block; 
padding-left:34px; 
outline:none; 
background-image:url('images/thrifty_zizel_email.png'); 
background-repeat: no-repeat;
background-position:center center;
}
#menu-item-1557 {
float: right;
}
#menu-item-1556 a {
float: right;
text-indent: -9999px;
display:block; 
padding-left:34px; 
outline:none; 
background-image:url('images/thrifty_zizel_twitter.png'); 
background-repeat: no-repeat;
background-position:center center;
}
#menu-item-1556 {
float: right;
}
#menu-item-1554 a {
float: right;
text-indent: -9999px;
display:block; 
padding-left:34px; 
outline:none; 
background-image:url('images/thrifty_zizel_google_plus.png'); 
background-repeat: no-repeat;
background-position:center center;
}
#menu-item-1554 {
float: right;
}

Click the green “Save CSS” button then check out your site.  It should look something like the picture at the top of this post.

Thesis 2 Save CSS

Some notes regarding the CSS:

  • #menu-item-1554 – this is specific to my site. You will need to determine the exact name of your menu items.
  • float: right; – this is what moves the menu items to the right side of our nav menu
  • text-indent: -9999px – this is what move the text off the page and out-of-sight
  • background-position: center center; – this centers the icon horizontally and vertically in the nav menu

I’m going to remove the sidebar item containing my social media icons.  Since my goal was to free up sidebar space it is now time to remove the social media icons from the sidebar.

Navigate from the WordPress Dashboard > Appearance > Widgets.  Locate your social media widget.

Social Media Widget

Perform a left-click on the sidebar item and drag-and-drop it in the WordPress Inactive Widgets box.  This will retain the settings should you decide to put the widget back where it was.

WordPress Inactive Widgets

Refresh your homepage and see how your nav menu and sidebar look.  Be sure to test each social media icon to make sure they go where you want them to go.  Notice how much more of my affiliate ad is showing without scrolling.

WordPress SideBar and Nav Menu

We are all done.  We just learned how to add social media icons to the Thesis 2 nav menu.

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 9 comments… add one }
  • Kylie June 13, 2013, 9:13 AM

    This works great for me except one menu item is larger than the rest. The first entry that sits right to the right hand side is larger than the other icons. Is there something I might be missing? Thanks.

  • Doug Macklem June 22, 2013, 4:45 PM

    Kylie: give me a link and I’ll see if I can figure it out.

  • Darlene September 11, 2013, 1:47 AM

    Oh, thank you, thank you!!!! I would never have figured this out on my own!

  • danae November 4, 2013, 12:01 PM

    This was a great tutorial! Thank you!

    I have a question, how do I remove the border and highlights showing automatically since this is how my menu is set up?

    Thanks

  • Doug Macklem November 5, 2013, 9:00 PM

    Check out Step 26 and see if this helps.

  • ilana June 28, 2014, 10:40 AM

    Sweet! How can you make the links target=”_blank” to open in a new tab.

  • Doug Macklem June 29, 2014, 8:45 PM

    That would be nice but I have not figured out how to do it. If you figure it out, please post it here for the rest of us.

  • Sara Yamtich January 1, 2015, 3:26 PM

    I just figured out how to get the nav items to open in a new window, in case you’re still wondering.

    In the menu settings (under Appearance), go to the upper-right corner of the screen and click on “Screen Options.” Then check the box called “Link Target.” Then go back down and select your custom link and you’ll see a check box for “Open link in a new window/tab.” Once you check that for all your social media icons, you should be good!

    Okay… now I have a question! For some reason, the social media icons aren’t showing up on other people’s computers (only my own). On my husband’s computer, it still just shows the lettering from the nav menu. Argh! Any suggestions for why this may be? (It’s his website I’m working on – http://www.bobyamtich.com).

    Thanks so much!

  • Sara Yamtich January 1, 2015, 3:30 PM

    Never mind! I figured it out. I just had to use my Media Library instead of the Thesis Images. All better!

    Thanks for this lovely tutorial. And Happy New Year!

Leave a Comment