Create a Social Icons Navigation with Integrated Search Bar

social-icons-tutorial

With a little bit of custom CSS and icons downloaded off the web, you can create a fabulous menu bar anywhere on your site using the Headway Navigation Block – which means you can align it however you want, include a search bar, and use a WordPress menu with it!

Two Styles & Approaches

We can either add a navigation menu that includes text links to our social profiles alongside helpful visual icons, or we can opt to display the icons only – no text. Regardless, we’ll start by creating a WordPress Menu under Appearance -> Menus. In your menu, add a custom URL menu item for each of your social media profiles (i.e. the url to your Twitter account would be something like http://twitter.com/headwaythemes, and if you have a vanity URL for Facebook it would be like https://www.facebook.com/HeadwayThemes).   Label each icon appropriately (i.e. Twitter, Facebook) – don’t leave the labels blank, it’s not necessary and not screen-reader/Google friendly.

Once you’ve added your menu items, click on the Screen Options tab on the top right of your screen. This will bring up the panel to add/remove options for your menu items. We need to ensure that the option for custom CSS classes is available, so check that box.

menuoptions

 

Now, when you edit a menu item, you can add a custom class to each one. We’ll add a class related to the menu item’s social network. For example, let’s give the Twitter menu item a class of twitter, the Facebook item a class of facebook, etc.

You should also find a social media icon set you like and upload the appropriate images to the WordPress Media Library.

(See this article on the WordPress Codex for information on how to create a menu and menu items)

Icons Only

The CSS to display the icons alone uses a CSS technique called Image Replacement.  The latest & greatest Image Replacement technique is outlined on Nicolas Gallagher’s site and you can read about it there.

You’ll use a snippet of CSS like this for each social media menu item. Replace the unique class (remember twitter and facebook ?) with the right class for each item, and replace the image path to reflect the URL for the correct icon in the WordPress Media Library.

My CSS here below is specific to the navigation block in Headway; as a rule your CSS should be just specific enough to target your element, but not overly specific. In our case, however, we need to be very specific in order to properly override the CSS that Headway applies from your settings in the Visual Editor.  So our Twitter link with a class of twitter will have CSS like this:

.block-type-navigation ul.menu li.twitter a {
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background: url(test.png); /* This should be the URL of your icon */
width: 64px; /* This should be the width of your icon */
height: 64px; /* This should be the height of your icon */
}

Now rinse and repeat for each icon! The menu label will disappear and your icon will appear. Make sure that your navigation block is tall enough to accomodate your icons as well.

Icons + Text

This method has a slightly different approach; we want the link to have an icon next to the label, rather than replacing the text with the icon.  Your CSS for each item will look similar to this (and again – change the .twitter to .facebook, .pinterest, etc based on the classes you assigned in the first part of this tutorial!)

.block-type-navigation ul.menu li.twitter a {
background: url(test.png) no-repeat left center; /* This should be the URL of your icon */
padding-left: 64px; /* This should be the width of your icon */
height: 64px; /* This should be the height of your icon */
}

That’s It!

You’ve got some sexy navigation going on, now! Stay tuned; next Tuesday we’ll be posting a tutorial on how to make your navigation menu “stick” to the top of the page as you scroll down!

Spread the word!

18 Responses

  1. Yes, adding social signal buttons is vital for the blog to get a good social reach as well, you can either add only icons or images of the various social networks or you can add both icon and text displaying the names of the social network buttons on the website.
    It helps to get a good visitors to the site. Thanks for the codes.

  2. I’m trying to set up my nav bar for icons only, but I keep getting an error message in css for the line where I enter the image url. Can you show me an example of the icon only code with a url in place so I can see why mine isn’t working? Thanks.

    • @shellyp what sort of error exactly? If the image can’t be found, just make sure you have the image right. If you can’t get it working without a full image URL, then use the full link, like url(“http://mydomain.com/myimage.jpg”) — the image should be visible if you copy/paste the link into your browser.

      • @caitlinheadway It looks like more of an alert actually and says the code is “overqualified”. It prompts me to remove the “ul” before menu and the “li” before twitter in line 1 of the code.
         
        However, whether I remove those parts or not, the icon still isn’t loading. The logo is visible when I past the URL in my browser, so I’m thinking that maybe I’m putting the CSS in the wrong place? I’m very new to all this, so bear with me!
         
        I’m in WordPress 3.5.1. I’m placing your snippet in Appearance –> Edit CSS –> then pasting your code in the window that appears. Am I way off here?

        • @caitlinheadway Thanks Caitlin. I’m making progress, but a few things are still wonky. Any chance you can peek at my site and see if it’s clear to you what I’m doing wrong? (www.everyland.com). 
          The twitter icon looks to be doubled up, and the black background of my nav bar behind the icon is gone.

  3. I tried to do this for this site: http://nurturerva.org/ and for some reason there is a reflection of the icons? Any idea what I need to do to fix that?

  4. Hi there, I was pleased to see this as a handy helper, I am trying to target a navigation bar that is just for the social media icons, I already have another navigation bar for the site, how can I target just one specific block as the icons aren’t showing up at all when I place the code in to the editor.

    The code is as follows for the specific navigation block (block 9):

    /* social_menu */#block-9 {
    .block-type-navigation ul.menu li.twitter a {
    border: 0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background: url(http://newgbc.greatbritishcommunity.org/wp-content/uploads/2013/08/twitter_icon_static.png);
    width: 30px;
    height: 30px;
    }

    Do I have to change the block.type bit? I am afraid my head is probably all little fried with all this today and any help would be greatly appreciated!!

  5. Hey so I used:

    .block-type-navigation ul.menu li.twitter a {
    border: 0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background: url(test.png); /http://www.alexandrafarrington.com/wp-content/uploads/2013/10/twittericon.pdf/
    width: 64px; /48px/
    height: 64px; /48px/
    }

    and “twitter” disappears…but no image in its place?

    When I open the site I can click on the area and it opens a new tab for twitter…which is great but… no icon.

    What am I doing wrong?

    • Did you replace (test.png) with your image url, as well at the width and height px to 48px? I see you pasted them beside where they’re supposed to be placed

  6. HELLO! :) Thank you so much for this!

    I just applied the sticky navigation bar to the top of my site and it looks great, however I noticed as I am scrolling down my ADDTHIS Sharing buttons are overlapping the bar. I also noticed in my post pages, the pictures in my posts, when hovered to activate the PINIT Hover Plugin I installed a while ago, are overlapping the bar as well.

    How do I fix this? There must be some way to alter the code and make it work for my site. Please help :(

    Website: http://www.itsnkenge.com

    Picture examples below
    ![](http://img13.imageshack.us/img13/1063/hxtt.png)
    ![](http://img707.imageshack.us/img707/6610/5jk3.png)

  7. I’ve used this technique on two websites and had problems with the code above BUT I resolved it with adding a line item for the link itself `body.custom .block-type-navigation ul.menu li.googleplus a{color: transparent!important;}`

    BUT, I get a problem where the “linkable” area for each icon extends far beyond the icon to the right. I’ve spent an hour trying different things to resolve this with CSS to no avail.

Leave a reply

Headway Newsletter

Get the latest updates from our blog directly in your inbox! Are you ready to learn the latest from Headway Themes?

Copyright © 2014 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress