Adding a navigation bar to a Wordress theme??

To make the list display horizontally you assign either
float: left OR
display: inline

to the LI tags, in your stylesheet

At this point I’d really encourage you to learn to work with the new custom menu system that was added in WP 3.0
You will likely find that much easier.

here’s what looks like a decent introduction
https://boxmodeljunkie.com/wordpress-custom-menus/

Here’s a more involved article:
https://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus

Hi Stvwlf,

Thanks for the response:

It looks good – although a little (lot) daunting, were using wordpress 2.8.5. These articles suggest this funtionality is only available in wordpress 3.0 – is that correct if so – its the old school explanation I need?

Could you give me an example of where I would add the “display: inline” to my styles sheet?

For example:
If I place the div id Menu code (above) within the <div id=”hd”> tag in the header.php file. I would need a #Menu tag in my style sheet (I think?). This is the code I’m struggling with, I’ve tried:

#menu1 li {
display: inline;
align: center;

Which simply threw out the rest of the page altogther – any ideas?

Many Thanks – in advance – I think I’m really close to it just missing some vital bits…?

Thank you – please tell me if I’ve got it all backwards – I’m no expert as you can see…!

Dewi

hi

you will need to upgrade to 3.0 to use the new menu features. ( you should do that anyway, for security reasons )

I don’t see a nav bar menu on https://www.millbrookprimary.co.uk

On https://www.newporthigh.co.uk you have the coding i am referring to
already in place on the horiz nav.

except your UL is in the wrong position there

<div style="padding-left: 70px;">
<ul>
<li><a href="https://www.newporthigh.co.uk/" title="Home Page">Home</a></li>
<li><a target="_blank" href="https://www.keystage3newporthigh.blogspot.com/" title="Key Stage 3 Blog">KS3 Blog</a></li>
</ul><!--      <<===  this doesn't belong here
<li-->  <<=== the ending comment doesn't belong here    <a target="_blank" href="https://www.taliesinhouse.blogspot.com/" title="Taliesin House">Taliesin Blog</a>
<li><a target="_blank" href="https://www.branwenhouse.blogspot.com/" title="Branwen House">Branwen Blog</a></li>
<li><a target="_blank" href="https://www.olwenhouse.blogspot.com/" title="Olwen House">Olwen Blog</a></li>
<li><a target="_blank" href="https://www.pryderihouse.blogspot.com/" title="Pryderi House">Pryderi Blog</a></li>
<li><a target="_blank" href="https://nhssixthform.blogspot.com/" title="6th Form Blog">6th Form Blog</a></li>
===>>> a  </ul> belongs here
</div>

the css being applied to that code is
style.css line 138
#menu li { display: inline; }

You have the solution on your earlier site.

To do this kind of work I highly recommend installing the Firebug addon for FireFox which is like having a stethoscope into the heart of any element on the page’s applied CSS. It shows you exactly what is going on.

You are doing a good job, by the way.

Hi Stvwlf,

Thanks again for the response – I’ll look into the upgrade (hopefully its straightforward.

I hadn’t noticed the poor position of the thanks for that, its now moved.

I use the firefox add on your correct its really useful. My issue is I’m not an expert on the code.

In the style.css on the Millbrook site there is already a routine called #menu. So when I added the code:

#menu li {
display: inline;
align: center;

It through the whole page below out!!

Can you see a way round this?

Thanks again for your help…!
Dewi

hi Dewi

if you can, name the top nav you are adding something other than #menu, like maybe #topmenu or #topnav

That way when you assign CSS to it, it will be only for that one sectiin and not affect any other section on the page (change the CSS accordingly).

Also, in case you don’t know, the definition of an ID (what ‘#’ represents) an ID is unique on a page, whereas a class is designed to be allowable on a page more than once. Thus having two sections called #menu on the same page is invalid HTML.

take care…

That is brilliant – worked a treat – easy really I guesss.!!

Thank you for the advice on class and ID it makes a bit more sense now.

Once again on behalf of both schools, thank you for your help..!