Need to make top navigation bar go across entire site

You’d need to re-structure the theme so that the nav bar lies under the header – instead of next to it. This might requite changes in your theme’s templates files as ell as your stylesheet.

Hmm. Any idea where to start?

I’ve worked with themes before where the issue was the logo placement on the top left was designated for a space that overlapped where the nav bar would go.

Then, by reducing the footprint for the logo area, the nav bar automatically positioned itself all the way to the left of the page.

Does this sound familiar? Thanks again.

Start with your theme’s header.php file.

In your CSS, you have the header split into two sections:
#top-left
#top-right

Each one of those div’s are set at a fixed width and are floating left.

You should look in the header file as esmi stated, find the code that starts with:

<div id="top-navigation">
And copy everything within and including that div and move it below the #top-right div content but while still within the #top div. You may also need to play with the clearing on that div and the margins after you’ve moved it below the top right div.

Does that make sense?

Okay, that worked to widen out the navigation bar but now it’s lower than I need it. How can I left justify it and bump it up so it’s above the gray bar and below the logo? Thanks!

The stylesheet is giving that div 30pixels of padding on the top from when it used to need to sit below the search bar. Look in your css file for this:

#top-navigation {
    padding: 30px 0 0;
}

And change the 30 to 0.

The stylesheet is giving that div 30pixels of padding on the top from when it used to need to sit below the search bar. Look in your css file for this:
#top-navigation {
padding: 30px 0 0;
}
And change the 30 to 0.

I made that change but nothing happened. Is there another place I need to try in the code?

The logo is 98 pixels tall, and so is the div that’s holding it (#top). But from the looks of the image, it could be cropped quite a bit.

I would suggest cropping some of the bottom of the logo image to get it down to 60-70 pixels. Whatever the new height of the logo image is, change the CSS of that div to match it. Here is the current CSS for that Div:

#top {
    float: left;
    height: 98px;
    padding-top: 6px;
    position: relative;
    width: 940px;
    z-index: 100;
}

Play with it a few different times and you’ll get the right size.

Awesome. That works great.

Now, I’d like to add a | symbol between each menu button on the top navigation bar. How can I do that so when I add or take away menu buttons in the future, the | symbol stays in tact?

Thanks!

Are you listing these pages manually or are you using the list_pages function?

Please post the code that falls between the <div id="top-navigation"></div> code.

Here you go:

<div id="top-navigation">
<?php wp_nav_menu( array(
	'container'       => 'ul',
	'menu_class'      => 'menu',
	'menu_id'         => 'topnav',
	'depth'           => 0,
	'theme_location' => 'mainmenu'
));
?>
</div><!-- end #top-navigation -->
<div class="clear">

Try this:

<div id="top-navigation">
<?php wp_nav_menu( array(
	'container'       => 'ul',
	'menu_class'      => 'menu',
	'menu_id'         => 'topnav',
	'depth'           => 0,
	'theme_location' => 'mainmenu',
	'after' => ' | '
));
?>
</div><!-- end #top-navigation -->
<div class="clear">

If that doesn’t work, try this:

<div id="top-navigation">
<?php wp_nav_menu( array(
	'container'       => 'ul',
	'menu_class'      => 'menu',
	'menu_id'         => 'topnav',
	'depth'           => 0,
	'theme_location' => 'mainmenu',
	'link_after' => ' | '
));
?>
</div><!-- end #top-navigation -->
<div class="clear">

Awesome. The second version of code worked best but I had to go in and add a few spaces before the | symbol to make sure it spaced out correctly.

The next question I have is how can I make the navigation menu items bold? My client wants them to stand out more but I’m not sure where to add the <b> code in the stylesheet.css or header.php file.

Thanks again ??

Well, I wouldn’t manually place strong tags in the html. It’s better to adjust the stylesheet.

However, the top navigation is using Cufon to generate a special font for the items in the navigation. You can still stylize cufon, if the font file that was uploaded included a bold version of the font.

Did you manually install Cufon or did it come built into the theme?

The Cufon came built into the theme. How can I check if there is a bold option?