Create a Social Icons Navigation with Integrated Search Bar

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.

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!