WordPress navigation bar howto
[Update - May 21, 2007: If you wish to put a menu bar with dynamic highlighting in your WordPress site, now you can also try my Menubar plugin (you can find it in the WordPress Plugin Directory).
In this post I’ll try to explain how to add a horizontal top navigation bar to a WordPress Kubrick installation; not a difficult task, but a little tricky if we want the result to display consistently in different browsers. By the way, I have tested this navigation bar with Internet Explorer 6.0, Firefox 1.0.6 and Konqueror 3.2.3.
So we start with a clean Kubrick theme (screen 1), and we replace the header image to begin with. That’s outside the scope of this howto, but it’s nice and easy, so let’s go ahead.
Screen 1
First of all we go to the wp-content/themes folder of our WordPress installation, and make a copy of the default folder with all its content; then we rename the copy as newtheme or whatever we like. From the WordPress administration panel we activate the newtheme.
All we need now is a new header image, of size 740 x 200 pixels. We name it kubrickheader.jpg and drop it in the newtheme/images folder, replacing the existing file with the same name. The result is shown in screen 2.
Screen 2
Now we start to build the navigation bar. A navigation bar is essentially a set of links, each pointing to a relevant page of our website, or to another site, or to an e-mail address. We add these links at the end of the header.php file in the newtheme folder, inside a div section we can call for instance navbar.
<div id="navbar">
<a href="http://www.dontdream.it">Home</a>
<a href="http://wordpress.org">WordPress</a>
<a href="http://www.dontdream.it/?p=20">Oklahoma!</a>
<a href="mailto:andrea@dontdream.it">Contact us</a>
</div>
The result is shown in screen 3.
Screen 3
Of course we have to add some styling, so we open the style.css file in the newtheme folder, and add the new CSS rules at its end. Let’s start with the #navbar rule, which defines the format of the bar:
#navbar {
margin: 0 10px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
font: 12px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
background: pink;
}
The result is shown in screen 4.
Screen 4
If we are using Internet Explorer, we can notice that the pink bar is shifted by one pixel to the left of the screen, but more on that later.
Now we can add the CSS rules #navbar a, which defines the normal format of the links, and #navbar a:hover, which defines their format when the mouse cursor hovers on them, as follows.
#navbar a {
padding-top: 3px;
padding-right: 12px;
padding-bottom: 3px;
padding-left: 12px;
background: #6f5590; color: #fff;
text-decoration: none;
}
#navbar a:hover {
background: white; color: #111;
}
The result is shown in screen 5.
Screen 5
Well, maybe the pink bar should be of a different color. Let’s just replace pink with navy in the #navbar rule, and that’s the result (screen 6).
Screen 6
If we wish to make some of those link a little special, we can assign them to a class, and then add a CSS rule for that class. So, in header.php we can modify the navbar div section like this:
<div id="navbar">
<a href="http://www.dontdream.it">Home</a>
<a class="special" href="http://wordpress.org">WordPress</a>
<a href="http://www.dontdream.it/?p=20">Oklahoma!</a>
<a href="mailto:andrea@dontdream.it">Contact us</a>
</div>
and in style.css we can add a #navbar a.special rule after the #navbar a rule, e.g.
#navbar a.special {
color: yellow;
}
The result is shown in screen 7.
Screen 7
Now the navigation bar looks right when seen with Konqueror or with Firefox, but it’s not perfectly centered when seen with IE 6.0. The trick is to go to the second #header rule in header.php, and delete the following declaration:
margin: 0 0 0 1px;
Then go to the second #footer rule in style.css, and delete the following declaration:
padding: 0 0 0 1px;
Let’s look at the final result, in screen 8:
Screen 8
Would you prefer something different? We can easily change the colors, font, size, spacing, even the position of our navigation bar. For instance, if we prefer a transparent bar overlapping the header image, we can set a negative top margin in the #navbar rule and remove the background color, that is:
#navbar {
margin: 0 10px;
margin-top: -20px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
font: 12px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
background: none;
}
And the difference can be seen in screen 9.
Screen 9
So we have got a simple navigation bar, easily customizable, which looks the same in different browsers. I hope you find it useful!
Credits: some time ago I noticed a nice navigation bar in ficklefish.net, and I tried to reproduce it in this site (I am still using its original colors, thank you Shelly). I also looked at liewcf.com (thank you Liew), the Pool theme, the WordPress Codex, various Max Design Tutorials and, of course, the HTML 4.01 Specification and the CSS level 1 Specification. Thank you to all those valuable resources.
thanks, very simple to follow
how do you make it so the nav bar will show what page you are on. like the one you have, it turns white when that page is being looked at.
Hello Jane,
[Update - May 21, 2007: I realized that the code I suggested to Jane does not pass validation as XHTML 1.0 Transitional ... so probably an easier way is to try my Menubar plugin!]
Another resource is:
http://codex.wordpress.org/Dynamic_Menu_Highlighting
Hope this helps!
Thank you for this. I appreciate the easy-to-follow tutorial.
I’m going to experiment with using this with a standard-shaped Kubrick header, with curved corners.
This looks really great but I’m having a hard time getting it to work. I originally was editing it with my own links as I went along but when I ran into problems I just switched back to putting in the code exactly as you list it. It appears that it’s not referencing the css code. I know that everything else on the page is referencing it because it works – just not the navbar. Any ideas?? I would really appreciate any help you could offer!
Nevermind, I got it fixed. Figures it fixes after I post a question on here eh? Thanks for the code!
Hi Alexiss,
I’m glad it worked for you! Thanks for visiting!
Sorry to leave another comment…I’ve got this all up and running on my site and it’s great! I’ve been trying to add the dynamic menu highlighting though and I’m halfway there, just a little stuck. It works with the “home” page but the other links don’t highlight up when I’m on that page. I did just what you said to Jane and have looked at Wordpress’ site but I’m still stuck. If you could offer any help I’d really appreciate it!!! Thanks!
Hello Alexiss,
[Update - May 21, 2007: I realized that the code I suggested to Jane and Alexiss does not pass validation as XHTML 1.0 Transitional ... Probably an easier way to get a WP menubar with dynamic highlighting is to try my Menubar plugin!]
Hope this helps!
Thanks a lot for your simple and straightforward how to, helping out wordpress and css newbies like myself. I hope to find more dummied up code customization blogs like yours, as gaining the how-to and knowledge sure beats simply downloading and activating some plug in. Cheers…btw, I had to post this message twice as I didn’t realize that your spam filter was asking for the sum of the two numbers, thinking it just wanted me to type in (add) the numbers to the field…luckily it was only a short reply lost.
Hello Jao,
thank you for your kind words (and sorry for the anti spam problem …). Yes, what I’m trying to do here is to share some hands-on knowledge, focusing on WordPress and CSS, and I’m glad you found it useful. Cheers!
First of all, I’d like to thank you for the awesome tutorial you’ve provided for us. I’m trying to follow it the best I can but I’m stuck on the part where you enter codes into style.css.
Could you specify where exactly I enter this code…
#navbar {
margin: 0 10px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
font: 12px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
background: pink;
}
I’ve tried several times but it isn’t working. Please let me know. I’d really appreciate it. Thanks!
Hello John,
you can append the new CSS rules at the bottom of your CSS file. Then make sure you save style.css and hit the refresh or reload button on your browser, otherwise the browser cache will continue to show the old style.
Also make sure the double quotes characters in header.php, e.g. in
<div id="navbar">
are correct. If you did copy and paste from this post probably they are not, if so just delete and retype them.
Thanks! Fixing the quotes worked!
I have another question if I may…
How do I get the navigation links to stretch across the entire width of the header?
I’m sorry. I have another question. This may seem incredibly simple but how do I make a page load into the main frame? For example, on this website, if you click on “WP Tutorials”, it leads to the WP Tutorials page in the frame below it. Please help! I’m desperate! Thanks.
Hello John,
for the first question, you could try to increase the 12px padding in the CSS rule:
#navbar a {
padding-top: 3px;
padding-right: 12px;
padding-bottom: 3px;
padding-left: 12px;
…
And for the second question, you could try a link like this:
<div id=”navbar”>
<a href=”http://www.mysite.com/?cat=4″>MyCategory</a>
<a href=”http://www.mysite.com/?page_id=5″>MyPage</a>
…
where MyCategory is your category name, and 4 is your category number, then MyPage is your page name, and 5 is your page number.
If you are not familiar with these things, you can still get a nice menu with the WordPress Menubar plugin, see:
http://www.dontdream.it/en/wordpress-menubar-plugin/
Great directions! I hate programming and coding but you make it seem so easy!
Hello! many congrats for this tutorial. so simple and so understandable. But I have 2 questions:
a) in internet explorer the menu, at the top, has a big white space. what do we do with that? firefox & safari are ok.
b) when I made a second one, below the main menu bar (with its name, properties etc) it makes the center content of my theme very wide and the sidebars to be at the end of each side of the browsers!!!!!!!
any suggestions?
Hello Sonia,
you have a big top margin in your CSS:
#navbar {
…
margin-top: 240px;
…
}
you can try to adjust that.
Then I think you have an unneeded </div> between the two navbars.
If you wish, you could also try Menubar, my menu plugin for WordPress, which offers more features and is easier to use than this simple hand-coded menu.
Thank you so much for this quick reply.
I added a big margin, because the menu was “hugging” the yellow letters.
My problem is not the top margin, but that it made the whole theme…….. whatever it wanted.
the “menubar” will it give me 2 lines of menu? Because that’s not my website, I ‘m just making it as a favor, because they are good friends, and one of the things that they wanted one way or another, is two lines for the menu
this is the div’s I used in header section:
Επικοινωνία
To CITYNEWS προτείνει
Αδέσμευτος Τύπος Παρασκευής
Φίλαθλος Παρασκευής
Ποιός τραγουδάει που!
Προτάσεις: Αδέσμευτου & Φίλαθλου
Αλφαβητικός Οδηγός 3000 κέντρων
Σινεμά
Θέατρο
and this is what I did in style.css:
#navbar {
margin: 0px 0px;
margin-top: 240px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
font: 13px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
font-weight: bold;
background: none;
}
#navbar a {
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background: #333d99; color: #fff;
text-decoration: none;
}
#navbar a:hover {
background: yellow; color: #111;
}
#navbar2 {
margin: 0px 0px;
margin-top: 3px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
font: 13px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
font-weight: bold;
background: none;
}
#navbar2 a {
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background: #333d99; color: #fff;
text-decoration: none;
}
#navbar2 a:hover {
background: yellow; color: #111;
}
If all these can be correct with just the menubar plugin, please do tell me
Hello again!
Did it and it’s a charm! Only one last question..pleaaaaaaaase:
.
If you see the second line of the menubar, again, it “hugs” the above line! I have tried everything and nothing has worked
Any suggestions?
thank you so much
Hi Sonia,
I’m glad you like Menubar! To improve the result, try this:
#navbar a {
…
line-height: 30px;
…
}
Buonasera!
THANK YOU!THANK YOU! THANK YOU SO MUCH.
It works perfectly
Ancora una volta: Mille grazie
Sonia
p.s: think the possibility to add a donation. Me, I would like to donate.
Ciao Sonia,
thank you for your kind words, and congratulations on your Italian!
Thanks So much…..
Thank You so much for this tutorial!