How to create an horizontal menu in the header with a Kubrick theme
October 29th, 2006 tela
The same question came up several times in the comments for the Sticky Menu plugin for Wordpress so I decided to write a post specifically for that.
The question is: How to style the menu created with the plugin Sticky Menu, so that it displays as horizontal tabs?
What’s more I noticed that several ones encountered a problem positioning the menu inside the header when using the Kubrick theme, that is the WordPress default theme.
So here is a step by step guide that will help you to create an horizontal menu using Sticky Menu with a Kubrick theme.
Here it is what we’ll get:
Once you have installed the Sticky Menu plugin and created the menu under Manage | Sticky Menus, you need to put the Sticky Menu code inside your template file where you want the menu to display:
<?php $menu = new stickymenu; ?>
<?php $menu->display_menu('menu=main'); ?>What you need to know is that the code of the Sticky Menu plugin outputs a HTML list with each menu item. Something like this:
<li><a href="/" title="Home">Home</a></li>
<li><a href="/about/" title="About">About</a></li>
<li><a href="/archives/" title="Archives">Archives</a></li>
<li><a href="/links/" title="Links">Links</a></li>
<li><a href="/contact/" title="Contact">Contact</a></li>So that the menu displays correctly, the first thing you need to do is to wrap the Sticky Menu code with the tags <ul></ul>:
<ul>
<?php $menu = new stickymenu; ?>
<?php $menu->display_menu('menu=main'); ?>
</ul>So let’s open the file header.php and add the code for the plugin Sticky Menu.
The key here is: don’t put the code inside the <div id="header"></div> but right after it:
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<ul>
<?php $menu = new stickymenu; ?>
<?php $menu->display_menu('menu=main'); ?>
</ul>
<hr />
The menu displays as a simple vertical bullet list:
It definitely needs some styling! As I previously commented you can find some very good code sample to style the list on this website: http://css.maxdesign.com.au/listamatic/.
So let’s try to implement this rollover horizontal list: http://css.maxdesign.com.au/listamatic/horizontal02.htm.
Let’s add a CSS selector -id="navlist"- to the tag <ul></ul> and wrap the list with <div id="container"></div>
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<?php $menu = new stickymenu; ?>
<?php $menu->display_menu('menu=main'); ?>
</ul>
</div>
<hr />
If you test the page now, you’ll get the same result as before. Of course! You need to add the CSS code in your stylesheet.
Open style.css. Add the code you find in http://css.maxdesign.com.au/listamatic/horizontal02.htm:
/* Begin Sticky Menu styles */
ul#navlist {
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
ul#navlist li {
display: inline;
list-style-type: none;
}
ul#navlist li a { padding: 3px 10px; }
ul#navlist li a:link, ul#navlist li a:visited {
background-color: #036;
color: #fff;
text-decoration: none;
}
ul#navlist li a:hover {
background-color: #369;
color: #fff;
text-decoration: none;
}
/* End Sticky Menu styles */So now we have an horizontal menu:
It’s not yet positioned where we want it to. To have a better control on how we position the menu and to make sure we have the same result on Firefox and Internet Explorer we’ll need to make a few changes on the Listamatic code.
We reset every margin and padding of ul#navlist to 0, not only margin-left and padding-left:
ul#navlist {
margin: 0;
padding: 0;
white-space: nowrap;
}We add some negative margin-top on the <div id="container"></div> to put it higher in the header. As we reset the margin of <ul></ul> we need to add some margin-bottom. And finally we center the menu in the page.
div#navcontainer {
margin-top:-27px;
margin-bottom:20px;
text-align: center;
}We’re almost done!
As a final touch you can now add some margin and padding on <li> and <a> to style the menu items further.
And here is the final CSS code:
/* Begin Sticky Menu styles */
div#navcontainer {
margin-top:-27px;
margin-bottom:20px;
text-align: center;
}
ul#navlist {
margin: 0;
padding: 0;
white-space: nowrap;
}
ul#navlist li {
display: inline;
list-style-type: none;
margin: 0 2px;
}
ul#navlist li a {
padding: 10px;
}
ul#navlist li a:link, ul#navlist li a:visited {
background-color: #036;
color: #fff;
text-decoration: none;
}
ul#navlist li a:hover {
background-color: #369;
color: #fff;
text-decoration: none;
}
/* End Sticky Menu styles */Hope this help all of you that wanted to put an horizontal menu in the header in a Kubrick theme.
Entry Filed under: WordPress plugins
22 Comments Add your own
Pages: « 3 2 [1]
10. tela | April 29th, 2007 at 11:48 am
Hi Tommy,
There is no special location for the CSS code. Anywhere in the css file can do. But you have to be very careful with typing. Any mistake, like missing semi-colon or curly brace, can spoil the code…
9. Tommy | April 27th, 2007 at 12:10 am
I’m falling over at the CSS stage, I’m guessing I need to put the text somewhere special in my CSS file? Any tips as I’m still at the bullet list stage and can’t get any further….
8. aveeshkumar | April 2nd, 2007 at 6:38 pm
Hi,
Thanks - that was an amazing tutorial. Had been playing around with wordpress for a couple weeks and wanted to add th menu to the kubrick theme - thanks for the step by step tutorial - did exactly as you detailed and learnt how wp does the loop with css and php…thanks.
7. Lisa | February 16th, 2007 at 5:53 am
Hi,
I’ve installed the plugin, and “sticky menu” shows up under “manage”, however when I go to the “sticky menu” link, I get the error message:
WordPress database error: [Table ‘youridea_wrdp1.wp_stickymenu’ doesn’t exist]
SELECT DISTINCT menu FROM `wp_stickymenu`
Not sure what to do.
Thanks!
6. tela | January 9th, 2007 at 6:58 pm
And of course this is not enough. You need also to modify your style sheet.
You don’t need to set up all the margin on
div#navcontainer. If you addclear: left;that should be enough to get a good position.5. tela | January 9th, 2007 at 6:49 pm
Hello Nando,
To resolve your problem you need to change where you insert Sticky Menu.
It turns out that for the Hemingway Reloaded theme you need to actually insert the code inside
<div id="header"></div>. And actually even inside<div class="inside"></div>.So it should look like this:
4. nando | January 8th, 2007 at 7:44 am
Hi…. the menu is great but I am having trouble with the theme I am using would you mind taking a look…? After I installed it… I keep getting this grey bar… I am not a coder so I have been messing with the CSS to try to fix but nothing seems to help.
I’d appreciate if you would not mind taking a look at: http://www.nervo.tv/
All the best! Nando Costa
3. Web Enterpriser | December 7th, 2006 at 12:14 am
You should take a look at this site. You can download up to 1,000 WordPress themes (that work) at once!
Free WordPress Themes!
Download 100% Free WordPress Templates, Themes, and Styles
http://www.icravewordpress.com
2. tela | November 18th, 2006 at 1:19 pm
Tony,
As for now Sticky Menu doesn’t output a class for the current item.
Somebody proposed a hack to do it but still haven’t had time to implement it.
1. Tony | November 17th, 2006 at 9:31 pm
this is great.
is there a way to make to have the current page have its own CSS style? So that you can ‘highlight’ what page you are on?
Pages: « 3 2 [1]
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed