Add a YouTube Button To WP Nav Menu Using CSS

This tutorial is one of a series created for users who have Kolakube skins installed on the Thesis framework.

I’ve already shown you how to add social media buttons to your nav menu using css sprites but what if you only want to add one button?

If you’re using a StudioPress theme, here’s a tutorial on Adding Social Media Buttons To The Genesis Navigation Menu.

You can use this tutorial to add any type of single social media button or icon to any of your navigation menu’s.

Note: Clear your browser cache after you add the Youtube button

Custom Menu Link

Go To Appearance > Menu’s and create a new custom link

Add your Youtube link in the URL field

Enter a name for the Navigation Label and click Save.

Find a Youtube Button

• YouTube buttons

Right click the button and save it to your desktop

Upload Button To Server

Upload your social button to your server

Go to Media > Add New from your WordPress dashboard.

Copy the File URL To Button

Make note of this file url by pasting it into your notepad.

Find the Menu I.D

Locate the menu-item =” ” number for the custom menu link you just created.

Hover your mouse over the Remove or Cancel link.

In this case you can just see the number 33179. Take note of this number.

Add CSS Code

Add this code to your custom CSS file editor

/* YouTube Nav Menu Icon
———————————————————— */

.custom .menu #menu-item-aaa a {
display:block; height:27px; width:160px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
background-image:url(‘http://wpsites.net/wp-content/uploads/2012/05/YT.png‘); background-position:0 0;
}
.custom .menu #menu-item-aaa a:hover { background-position:0 -24px; }

You’ll need to edit 4 values with your own

1. .custom .menu 
2. menu-item- i.d number
3. File URL to your YouTube or other social media button
4. Width and Height of your social media button

The first 1 may be tricky if you have created multiple menu’s like i have.

If .custom .menu doesn’t work use Firebug or change the code to this?

.custom #menu-item

Both the Thesis & Kolakube forums provide excellent support for custom coding.

Note: You can also use this code on any theme by deleting any reference to .custom and using the rest of the code. Example:

.menu #menu-item-aaa a {
display:block; height:27px; width:160px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
background-image:url(‘http://wpsites.net/wp-content/uploads/2012/05/YT.png’); background-position:0 0;
}
.menu #menu-item-aaa a:hover { background-position:0 -24px; }

Related Coding Solutions

• Add YouTube Subcribe Button to WordPress Nav Menu