Add Social Media Icons In The Navigation Bar On Any WordPress Theme

As you know social media is really an important part of a website. It is a way to get spread. Social media icons in the navigation bar are directly viewable by the visitors, it will increase the chances to get shared.

So, how to add social media icons in the navigation bar?

From here I am writing two methods to get it done.

Method 1 - From CSS

It is a really easy method, just you need to follow the below steps

1. Obviously, you will need social media icons, so download 32x32 size of icons.

2. Go to the Appearance > Menus.

3. Open screen options panel located at the top right corner.

4. Enable CSS Classes by selecting the checkbox.

5. Now create custom menus for social links.

6. Enter custom CSS classes in the given textbox.

7. Following are the custom CSS classes used to add and align icons. Add these codes to the style sheet.

 .social-icons
{
 width: 45px;float: right !important;
 padding: 0 !important;
 height: 32px;
 width: 32px;
 margin-left: 10px !important;
}

.class-facebook, .class-facebook:hover
{
 background: url(images/facebook.png) no-repeat right !important;
}

.class-twitter, .class-twitter:hover
{
 background: url(images/twitter.png) no-repeat right !important;
}

.class-gplus, .class-plusone:hover
{
 background: url(images/plusone.png) no-repeat right !important;
}

.social-icons a
{
 opacity: 0;
}

That's it, you can see them on the frontend.

Method 2 - From Plugin

This is an another way. Menu Social Icons is a useful plugin to add social icons in the navigation bar. It is not too different from the above steps. Let's see:

1. Install the plugin.

2. In the Appearance > Menus, locate the pane Links

3. Click on any icon that you want to add to the navigation. You will find that URL and Link Text will be filled automatically. Now add it to the menu.

That's it.

I think these two methods are too easy to implement on any WordPress theme. Hopefully, it will help you.