I have been putting off adding my social media icons to my nav bar. Today it was on top of my todo list. With some themes this is very easy so I figured it had to be easy to do in Headway 3.0(theme this blog uses) also. I just have never taken the time to do it until now.

Adding the icons was easier than I thought and I even learned a few new features of WordPress in the process.  I wish I would have known about these features when I was developing Blog Made Simple. It sure would have made life easier. Since learning this secret I have already used it on my Non-profits website.

I knew there was advanced features on the post’s page and I have used the screen options button to turn things on and off there many times. However, I never noticed the ‘screen options’ button while in the menu settings portion of WordPress. Clicking the ‘screen options’ button, when viewing the menu settings, yields us some new options.

Screen options button circled in black
Selectable Options available
Click to Enlarge

I wanted to use some custom css so I checked the CSS classes box under screen options.

So what does this have to do with social media icons, you ask? Well to put them on my page I actually made another totally separate nav menu in Headway 3.0 and then created one menu item for each of the icons I wanted to display. I created the menu items using the custom link option. So for Twitter I created a menu item called Twitter and linked to http://twitter.com/thedannymullen. After doing so I then clicked on the menu item and put nav-twitter into the css classes field.

After doing all of this I then created Custom CSS(Live CSS in Headway3.0) with the following:

.nav-twitter a,
{ //hide text for menu item
font-size: 0;
text-indent: -1000px;
}
.nav-twitter { // place icon using css name you created for menu item
margin-left: 7px;
background: url(‘https://dannymullen.net/twitter.png’);
background-repeat: no-repeat;
}

That’s how I added Social media icons to my upper right corner.

Related Articles:



(Disclaimer: Some of the links contained in this post are affliate links. See the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”)