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
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
- .custom .menu
- menu-item- i.d number
- File URL to your YouTube or other social media button
- 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; }
Was This Tutorial Helpful?