I've never attempted a complete website in Wordpress until now and I'm finding the navigation side of thing a bit confusing. The site is goign to features pages as well as the blog and I've created the navigation using an image controlled by css like so:

 

the code

<div id="navigation">
<ul id="nav">
               <li id="home"><a href="#" title="cupcakehq Home"><span>cupcakehq Home</span></a></li>
	<li id="about"><a href="#" title="About cupcakehq"><span>About cupcakehq</span></a></li>
	<li id="themoneyboxselection"><a href="#" title="The Money Box Selection"><span>The Money Box Selection</span></a></li>
	<li id="blog"><a href="#" title="Blog"><span>Blog</span></a></li>
	<li id="stockists"><a href="#" title="cupcakehq Stockists"><span>cupcakehq Stockists</span></a></li>
	<li id="contact"><a href="#" title="Contact cupcakehq"><span>Contact cupcakehqh</span></a></li>
</ul>
</div>

 

the css

#navigation {width: 880px; height: 43px; margin: 0 auto; padding: 0px; background: url(/images/navigation.jpg) no-repeat;}
#nav {width: 880px; height: 43px; background: url(/images/navigation.jpg) no-repeat; margin: 0px; padding: 0px; position: relative;}
#nav li {margin: 0px; padding: 0px; list-style: none; display: block; position: absolute; text-indent: -3000px;}
#nav a {display: block; height:43px; text-decoration: none;}

/* POSITION OF THE NAVIGATION BUTTONS
---------------------------------------------------------------------------------------------------------------*/
#home			{left:0px; top:0px; width:88px; height:43px;}
#about			{left:99px; top:0px; width:90px; height:43px;}
#themoneyboxselection	{left:200px; top:0px; width:335px; height:43px;}
#blog			{left:547px; top:0px; width:70px; height:43px;}
#stockists	 	{left:629px; top:0px; width:128px; height:43px;}
#contact	 	{left:769px; top:0px; width:111px; height:43px;}

#home a, #about a, #themoneyboxselection a, #blog a, #stockists a, #contact  {height:43px;}

/* HOVER AND ACTIVE STATES OF THE NAVIGATION BUTTONS
---------------------------------------------------------------------------------------------------------------*/
#home a:hover, #home .active 					{background:url(/images/navigation.jpg) -0px -43px no-repeat; width:88px; height:43px;}
#about a:hover, #about .active 					{background:url(/images/navigation.jpg) -99px -43px no-repeat; width:90px; height:43px;}
#themoneyboxselection a:hover, #themoneyboxselection .active 	{background:url(/images/navigation.jpg) -200px -43px no-repeat; width:335px; height:43px;}
#blog a:hover, #blog .active 					{background:url(/images/navigation.jpg) -547px -43px no-repeat; width:70px; height:43px;}
#stockists a:hover, #stockists .active 				{background:url(/images/navigation.jpg) -629px -43px no-repeat; width:128px; height:43px;}
#contact a:hover, #contact .active 				{background:url(/images/navigation.jpg) -769px -43px no-repeat; width:111px; height:43px;}

 

This is how I would do navigation for a normal site - so happy to change this to adapt to WP. I've inserted the code into my header.php file and it all looks fine. I've created all my pages [not styled yet] and pasrt styled the blog so far. I'm just wondering...

 

a- how do I link to the pages and blog

b- how to I show the active state for each link when you're on a specific page or in the blog

 

I've set the blog to start on a satic page - namely the homepage and I guess the navigational links would be as follows for the pages

 

/ - for homepage

/about/

/the-money-box-selection/

/stockists/

/contact/

 

what would be the link to the blog? Using /blog/ doesn't work.

 

And then my mind boggles on how to get the active states - I'm using the latest version of WP and there's the new <body <?php body_class(); ?>> tag - no idea how to use this and whether it would help in this situation. Or do I try and do this using 'wp_list_pages' ???

 

Any advice more than welcome as I'm head scratching at the moment. I'm working on the site 'live' so you can visit it here

Right I've taken the setting off to use a static page for the front page and this allow me to use '/' to get to the blog and /home/ to get to the homepage - by doing this is there another way of soting it so that when you come to the site you get taken to the homepage first.

  <div id="nav">
  <ul>  
   <li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
   <?php wp_list_pages('title_li='); ?>
  </ul>
 </div><!-- nav -->

 

that is the code to display the pages in order of how you put them

 

i always use the wp_list_pages so when i / client adds more pages, its automatically updated on the menu

If I insert the code you suggest this is what I see when I view source:

 

<div id="nav">
<ul>  
    <li><a href="http://www.cupcakehq.com">Home</a></li>
    <li class="page_item page-item-70"><a href="http://www.cupcakehq.com/about/" title="About">About</a></li>
           <li class="page_item page-item-76"><a href="http://www.cupcakehq.com/contact/" title="Contact">Contact</a></li>
           <li class="page_item page-item-69 current_page_item"><a href="http://www.cupcakehq.com/home/" title="Home">Home</a></li>
           <li class="page_item page-item-74"><a href="http://www.cupcakehq.com/stockists/" title="Stockists">Stockists</a></li>
           <li class="page_item page-item-72"><a href="http://www.cupcakehq.com/the-money-box-selection/" title="The Money Box Selection">The Money Box Selection</a></li>
</ul>
</div>

 

so they're not in the right order for a start and none of the links work at all.

 

any ideas?

code works fine on my test blog - www.garethgillman.co.uk/blog (its a mess but the bav is in top right)

 

i see you have seo urls turned on, any other mods ?

 

go to the pages menu in the admin panel, click edit, then change each one with the order set to how you want them to appear.

 

I have no idea why the links aren't clickable, as the code is correct. Remove the seo url / custom url to see if that helps. It could be too with a mod or something else in your code

I added page numbers to all the pages going from 1-6 but the blog would be page 4 and I can't number that as it's not actually a page. If you look at my CSS I've got "text-indent: -3000px;" in there so that text links don't appear over my image. If I take this out all the text links appear one on top of the other. So not sure how to get round this so that my actuall css styling for the nav gets picked up. still don't know how to include the blog in the navigation and also for the homepage to be the first page you come to.

 

Help!

I added page numbers to all the pages going from 1-6 but the blog would be page 4 and I can't number that as it's not actually a page. If you look at my CSS I've got "text-indent: -3000px;" in there so that text links don't appear over my image. If I take this out all the text links appear one on top of the other. So not sure how to get round this so that my actuall css styling for the nav gets picked up. still don't know how to include the blog in the navigation and also for the homepage to be the first page you come to.

 

Help!

 

you want a static homepage and a seperate blog page ?

 

go to settings > reading, set the static homepage to something like a page called home, then set the blogging page to one called blog.

 

the menu i put above automatically picks them up

 

 

have you changed the html of the menu, to match the html of your old menu e,g,

 

<div id="navigation">
 <ul id="nav">
  <li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
   <?php wp_list_pages('title_li='); ?>
 </ul>
</div><!-- nav -->

I don't understand what you mean with regards to a page for the blog - the blog is the blog - it's not a page! I also don't knwo what you mean by this - "have you changed the html of the menu, to match the html of your old menu".

I've figured out how to sort the navigation out to get the links to work - I had to create a page called 'Blog' but not enter any content into it or set a template for it or anything. Within the Reading Settings I had to select 'front page' to be 'home' and the 'posts page' to be 'blog' and then within the navigation code I used the following:

 

/home/ for the homepage link

/blog/ for the blog link

 

and as I've set wordpress to use a static page for the homepage it all works as it should now.

 

Just got to figure out how to do the active states for the buttons when you're on a specific page - anyone got any ideas?

If anyone is interested I've figured out how to do this 'my way' - not sure if it's the best way, but I've utilising the <> and added this to my CSS

 

body.page-id-69 #home 			{background:url(/images/navigation.jpg) -0px -43px no-repeat; width:88px; height:43px;}
body.page-id-70 #about 			{background:url(/images/navigation.jpg) -99px -43px no-repeat; width:90px; height:43px;}
body.page-id-72 #themoneyboxselection 	{background:url(/images/navigation.jpg) -200px -43px no-repeat; width:335px; height:43px;}
body.page-id-74 #stockists 		{background:url(/images/navigation.jpg) -629px -43px no-repeat; width:128px; height:43px;}
body.page-id-76 #contact 		{background:url(/images/navigation.jpg) -769px -43px no-repeat; width:111px; height:43px;}

body.blog #blog, body.single #blog, body.archive #blog,body.error404 #blog {background:url(/images/navigation.jpg) -547px -43px no-repeat; width:70px; height:43px;}

 

Basically I visited each page and looked at the source code and copied the class generated within the body tag for each page. I then created specific instruction within the css that would turn the active state on for the navigation depending on what class was displayed in the body tag. As the blog is a little more complicated, there are extra classes there to cover all eventualities - not sure I've covered everything, but it'll be easy enough to add to the list if I find I'm missing something.

 

So it's a solution that works for me, but might not be the best way of doing it.