As part of our free web graphics section of the blog, we recently released the Navigation Bars. In the comments of that post, folks asked us if we’d explain how to use them into a theme.
Easy to Implement with the Genesis Framework
If you are running any of your sites on the Genesis Framework, using the icon set for bloggers is quite simple – and only requires a few steps.
Every child theme has a primary and secondary navigation, which are defined in the style.css by #nav and #subnav respectively. For this example, I’m going to use the primary navigation and blue navigation bar.
Upload Navigation Bar Images to Your Server
The first thing you should do is download a fresh copy of the navigation bars. Inside the zip file you’ll see the PSD file for the navigation bars, but also 3 folders – blue, green and black.
Open up the blue folder, and copy all 4 image files you see: nav-blue-hover.png, nav-blue-line.png, nav-blue.png and nav.home. You will now need to upload those images into your child theme’s images folder.
Add CSS to Style Your Navigation Bar
After you’ve uploaded the images, you’ll need to open up your child theme’s style.css file and look for the primary navigation elements. That will begin here:
/* Primary Navigation ------------------------------------------------------------ */
Immediately after that you will see a number of CSS definitions for the #nav and it’s related selectors. You can delete all of that up until you get to this:
/* Primary Navigation Extras ------------------------------------------------------------ */
And replace it with this:
#nav {
background: url(images/nav-blue.png);
clear: both;
color: #fff;
margin: 0 auto;
overflow: hidden;
text-transform: uppercase;
width: 960px;
}
#nav ul {
float: left;
padding: 0 0 0 10px;
width: 950px;
}
#nav ul ul {
padding: 0;
}
#nav li {
background: url(images/nav-blue-line.png) no-repeat top right;
float: left;
list-style-type: none;
padding: 0 2px 0 0;
}
#nav li.right,
#nav li li {
background: none;
padding: 0;
}
#nav li.home a,
#nav li.home a:hover {
background: url(images/nav-home.png);
height: 50px;
padding: 0;
text-indent: -9999px;
width: 50px;
}
#nav li li {
background: none;
padding: 0;
}
#nav li a {
color: #fff;
display: block;
font-size: 13px;
padding: 14px 15px;
position: relative;
text-decoration: none;
}
#nav li a:hover,
#nav li a:active,
#nav .current_page_item a,
#nav .current-cat a,
#nav .current-menu-item a {
background: url(images/nav-blue-hover.png);
color: #fff;
}
#nav li a.sf-with-ul {
padding-right: 25px;
}
#nav li a .sf-sub-indicator {
background: url(images/arrow-down.png) no-repeat;
height: 10px;
position: absolute;
right: 10px;
text-indent: -9999px;
top: 20px;
width: 10px;
}
#nav li li a,
#nav li li a:link,
#nav li li a:visited {
background-color: #1790d1;
border: 1px solid #0274be;
border-top-width: 0;
color: #fff;
font-size: 12px;
padding: 5px 10px;
position: relative;
text-transform: none;
width: 138px;
}
#nav li li a:hover,
#nav li li a:active {
background: none;
background-color: #0274be;
}
#nav li li a .sf-sub-indicator {
background: url(images/arrow-right.png) no-repeat;
top: 10px;
}
#nav li ul {
height: auto;
left: -9999px;
margin: -3px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -33px 0 0 159px;
}
#nav li:hover>ul,
#nav li.sfHover ul {
left: auto;
}
li:hover ul ul,
li.sfHover ul ul {
left: -9999px;
}
li:hover,
li.sfHover {
position: static;
}
Setting up the Home Icon for the Home Link
If you want to use the icon as seen in the example of the Navigation Bars, it’s quite simple. Inside your custom menu screen, open up your Home link box and look for the CSS Classes (optional) option and enter home as the value. You can see what that looks like here:
If you don’t see the CSS Classes (optional) box, you can enable it by opening up the Screen Options menu in the upper right hand corner of your dashboard (next to the Help tab) and clicking on the CSS Classes option.
About Brian Gardner
Brian my theme has /******* Nav Menu ********** with all of the #nav and ends with /******* SubNav Menu****** . Do I delete all of the contents within this and copy in yours?
Yeah – the headers (Nav Menu and Primary Navigation) are just labels… you should be ok to replace all of the #nav stuff – just be sure to make a backup to revert if things don’t work out.
Brian,
Do you have something that tells what each part of the css does? E.g. What the home-top ul li is? Without me having to change it and look for myself?
I know it is my job to learn stuff on my own, but that would really help.
It worked, but doesn’t look right… Have a look.
Add a margin: 0; to this #nav ul.
Perfect thanks Brian. Looks fantastic!
Hi Ben
Good looking Enterprise theme.
I’m just setting up a site for a client using Enterprise.
Not sure whether to leave the default or add Brian’s menu.
Still… good to have a choice.
Nice one Brian
Oh the mysteries and delights of CSS. LOL
Good menu and a great tutorial.
Much appreciated.
Thank You! Just what I needed. You guys interested in running a Country?
Tried the steps but got some very odd results, so changed it back. I really only want the “HOME” to be the icon of a tiny home for home. My Prim Nav Custom menu shows URL http://www.wp-webdesigns.com (because the home nav wouldn’t appear or go to home without the URL) and the CSS class now says “home.” I am thinking I need a way to direct the CSS to NOT put the word “home” or the link rollover with the color change I have made. I added the home (nav-home.png) to my images folder. I am not sure how to do this. Any help is always appreciated.
Thanks for the great free images! We love StudioPress and all the help we have gotten over the past couple of years!
Nancy – looking through the source code on your site, it appears as though you have the default style attributes from the original Enterprise theme, and only slightly modified. Did you try copy/pasting the entire code I placed in this tutorial?
Brian, yes I did. I copy/pasted the entire code but got some sort of doubled up navigation result. It looked really bad. So I deleted it. I am using a blue nav anyway, so thought IF I just could replace the “home” with the home icon. So I followed those steps but my custom menu. I am not sure what my css needs to NOT call up the text and hover text but to call up the icon instead. Thanks, Nancy
That is great, I just went through the excellent tutorial and was able to place the navbar on my website.
Thanks a ton for all the great value you continue to add!!!
pls help me, Brian. My site doesn’t look right
Just took a look at your site – and it looks like you have the menu setup and looking good. Now just time to add links.
thank you brian, but how can I align center the navbar at the footer?
thank you, I’ve solved it
I am not sure what I am missing. I am following the directions but the new menu buttons do not show up.
Jeff – can you provide a link to your site? It’d be helpful to see what’s happening.
Brian,
Here is a link http://www.wet-umbrella-bags.com Thanks.
Thanks – this tutorial allowed me to do something inspired by the nav bars you published. I was lost until I read it.
Worked perfectly! So easy, thanks for making me feel like I know what I am doing.
Anytime Amy, anytime!
Hi Brian,
I cannot see background image in my menu.
The image is on the server:
http://www.allegra360.com/wp/wp-content/themes/lifestyle2/images/nav-blue.png
I think I figure out this – I removed white bacground color from: #nav ul – is this the right solution?
Looks like you got it working?
My nav bar is looking funky! It looks like it’s doubled up. Any ideas on how to fix this? Thanks.
Looks like you added your own padding, which is overriding the code supplie. Remove the line in bold:
#nav li a {
color: #fff;
display: block;
font-size: 13px;
padding: 14px 15px;
position: relative;
text-decoration: none;
padding: 0 2px 0 0;
}
Hi Brian,
I would love to rock the black nav bar, but I’m having a similar issue with it not showing up at all. I followed the instructions to a tee, but still no dice.
Not sure if this has anything to do with it, but I’m using Genesis 1.7 and the Education child theme.
I’m a novice at this, so would you mind taking a peek at my site?
http://www.phillyfandemonium.com
Thanks man!
Well, I guess I spoke too soon. I got it now…thanks anyway though
Hah, good to hear you’ve got it figured out!
Thanks!!
Question though Brian, how could I put some padding under my header image?
See how it’s really tight above the nav bar?
I’m sorry, I’m not much of a coder
Change #nav {margin: 0 auto;} to #nav{margin: 10px auto 0;}
Perhaps in the future this nav bar will be available as a traditional plug in or (one can hope) a widget, and not CSS code. Very nice nav bar.
Some browsers are showing a background image for #nav li li a, so adding {background-image: none;} corrects this.
Also for those who want to use the navigation bar in their header right, based on the default (width of 550px) you can use this (which mimics the use case above by Brian) to replace the entire Header Right Navigation:
/* Header Right Navigation
———————————————————— */
#header ul.nav,
#header ul.menu {
float: left;
}
#header .widget_nav_menu {
background: url(images/nav-black-550.png) no-repeat;
clear: both;
color: #fff;
margin: 10px auto 0;
overflow: hidden;
text-transform: uppercase;
width: 550px;
height: 50px;
}
#header ul.nav ul,
#header ul.menu ul {
float: right;
margin: 0;
padding: 0;
width: 100%;
}
#header .widget-area ul {
margin: 0;
}
#header li.home a,
#header li.home a:hover {
background: url(images/nav-home.png);
height: 30px;
padding: 0;
text-indent: -9999px;
width: 30px;
}
#header ul.nav li,
#header ul.menu li {
background: url(images/nav-black-line.png) no-repeat top right;
float: left;
list-style-type: none;
padding: 0 2px 0 0;
text-transform: uppercase;
height: 50px;
}
#header ul.nav li a,
#header ul.menu li a {
color: #fff;
display: block;
font-size: 13px;
padding: 14px 10px 5px;
position: relative;
text-decoration: none;
height: 31px;
}
#header ul.nav li a:hover,
#header ul.nav li a:active,
#header ul.nav .current_page_item a,
#header ul.nav .current-cat a,
#header ul.nav .current-menu-item a,
#header ul.menu li a:hover,
#header ul.menu li a:active,
#header ul.menu .current_page_item a,
#header ul.menu .current-cat a,
#header ul.menu .current-menu-item a {
color: #fff;
}
#header ul.nav li ul li, #header ul.nav li ul li a, #header ul.menu li ul li, #header ul.menu li ul li a {
height: auto;
}
#header ul.nav li li a,
#header ul.nav li li a:link,
#header ul.nav li li a:visited,
#header ul.menu li li a,
#header ul.menu li li a:link,
#header ul.menu li li a:visited {
background-color: #333;
border: 1px solid #666;
border-top-width: 0;
color: #fff;
font-size: 12px;
padding: 5px 10px;
position: relative;
text-transform: none;
width: 138px;
}
#header ul.nav li li a:hover,
#header ul.nav li li a:active,
#header ul.menu li li a:hover,
#header ul.menu li li a:active {
background-color: #000;
}
#header ul.nav li ul,
#header ul.menu li ul {
/*height: auto;*/
left: -9999px;
position: absolute;
width: 160px;
z-index: 9999;
}
#header ul.nav li ul.sub-menu, #header ul.menu li ul.sub-menu {
margin-top: -5px;
}
#header ul.nav li ul.sub-menu li, #header ul.menu li ul.sub-menu li {
background: none;
/*height: 50px;*/
}
#header ul.nav li ul.sub-menu li a, #header ul.menu li ul.sub-menu li a, #header ul.nav li ul.sub-menu li a:link, #header ul.menu li ul.sub-menu li a:link, #header ul.nav li ul.sub-menu li a:visited, #header ul.menu li ul.sub-menu li a:visited {
background: none;
background-color: #1790D1;
border: 1px solid #0274BE;
padding-top: 10px;
}
#header ul.nav li ul.sub-menu li a:hover, #header ul.menu li ul.sub-menu li a:hover {
background: #0274BE;
border: 1px solid #0274BE;
}
#header ul.nav li ul a,
#header ul.menu li ul a {
width: 140px;
}
#header ul.nav li ul ul,
#header ul.menu li ul ul,
#header ul.nav li ul.sub-menu ul.sub-menu {
margin: -40px 0 0 159px !important;
}
#header ul.nav li:hover>ul,
#header ul.nav li.sfHover ul,
#header ul.menu li:hover>ul,
#header ul.menu li.sfHover ul {
left: auto;
}
I’m trying to put this in my blog with a Prose Child Theme. I’ve copied the css and followed the instruction mentioned about but it messed up my nav menus. How can I implement the black nav bars into Prose?
Thanks for all the great icons nave bars and extras.
I am having a slight issue with the nav bars. I am not sure how to explain it. Can you just take a look at the site. http://aabmedia.com/
Using lifestyle 2 theme and everything is all updated.
Thanks
In your child theme’s style.css file, look for the #nav ul and add margin: 0;
Thank You. I am always so impressed with the support and community at Studiopress. Keep up the good work!
Alan
Wow, This is great. thanks a lot. This navigation bar looks beautiful.
My PAGES are NOT displaying in my Primary Navigation menu. I have utilized several of the Themes are have never had this problem before?
Make sure you have your custom menu created and set for the theme location for the primary navigation on the Menu screen in your WP dashboard.
Hey Brian
Thanks for the comprehensive tutorial. But even this didn’t change anything for me- I followed the instructions to a T but nothing has changed. Can you please take a look and tell me what I am doing wrong?
My website is http://www.bhaskars.net
Thanks
You are using Prose, which is a bit of a unique case. Did you put all of the suggested css code into your style.css file? If so, it actually should go into the custom css section inside the design settings.
Yay. I’m almost there.
I moved the CSS from style.css to custom.css as you suggested and this is the result. I am using the black navbar, but it sure does not look black.
I am sure I need to change a color code somewhere but for the life of me can’t figure out where exactly.
In Prose child theme, the edits in the design setting is going over the css of the nav bars. The hovers and some stuffs like the nav border and hover settings are coming from the design settings. Is there any special way to implement this on Prose?
Using Life Style Theme made the change to Css. I have lost the main category tabs and only get the drop down, also the secondary nav menu didn’t change. I uploaded all 3 colors but not sure how to select the one I want.
Slightly different note I was using Dynamic Content Gallery to reflect images on home page. Tried it with Slider got the ‘frame’ showing now – but empty!
Have read the comments above and like a number of them I am not a coder, so is there a tutorial designed to alter the look and feel of certain headers – looks like it is all hard-coded.
Dalyn
Nothing seems to be working.
I’ve done everything you said, and nothing works! I’ve created the menu and everything but still is not working.
What is wrong in here?
If you can supply a link to the site so we can see what things look like, that would be helpful.
I am not getting the “Home” section to enter the code for the home icon. Went to screen options and selected CSS options and nothing….
Did you add the home link to the custom menu? I don’t see it…
I am clicking on SCREEN options and checking CSS OPTIONS and I am NOT getting any changes in the options i have available. There is no HOME link box. Is there something wrong with my dashboard?
Nevermind…. you phrased it weird in your tutorial. You should have said “Go to Custom Links, make a Home button add it to your menu THEN open the CSS options”, i was sitting here waiting for a HOME link box to pop up when i changed my screen options. Anyway thanks for your quick response, I am sure i will be bothering you again…
I have Agent theme I am unable to reset my navigation but and avatar. I have spent hours unclear how to reset with page and blog separate. Blog look horrible,I really
need help.