Quote Originally Posted by coolpillows View Post
Or...as I'm re-reading this, you are saying to edit the CSS so that the <li>...</li> of the menu are not just hard coded with the image but will take the id generated by WP and then apply the image paths with attributes display, width, height, etc. in the CSS file.
Do I have that right??
Well, kinda. Let's recap:
You have created a dynamic menu in your WP site, which means you are in a position to create new pages via your WP dashboard and add them to your menu.
You have embedded your dynamic menu in your WP theme (in the file "header.php") with the following code:
PHP Code:
<?php if ( !function_exists('dynamic_sidebar') || dynamic_sidebar('Menu') ) : ?>
When WP parses your header.php, it sees this line, does a bit of black magic and then spits out a load of HTML code.
Unless you have changed your menu, the HTML code should look something like this:
HTML Code:
<div class="navbar">
  <div class="menu-main-container">
    <ul id="menu-main" class="menu">
      <li id="menu-item-411" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-411"><a href="http://localhost/blog/">Blog</a></li>
      <li id="menu-item-412" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-412"><a href="http://localhost/humor/">Humor</a></li>
      <li id="menu-item-413" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-413"><a href="http://localhost/consulting/">Consulting</a></li>
      <li id="menu-item-414" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-414"><a href="http://localhost/contact/">Contact</a></li>
    </ul>
  </div>
</div>
So, as you can see, WP has used an unordered list to create the menu.
It has also added a bunch of classes and ids to the <li> elements in the list.
These represent your menu items.

If you look at your page at this point, you will just see something like:
  • Blog
  • Humor
  • Consulting
  • Contact

i.e an unstyled list containing your menu points. We now need to style this.

I'm presuming you have amended the your header.php to replace this:
HTML Code:
<link href="http://www.leesachs.com/testing/bootstrap.css" rel="stylesheet" type="text/css" />
with this:
PHP Code:
<link rel="Stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" />
Ok, so, using a text editor, you now have edit the file "style.css" (in your WP root folder) and style the menu.
Here are some styles to get you going.

Code CSS:
ul#menu-main{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
}
 
ul#menu-main li{
  float:left;
}
 
ul#menu-main li a{
  display:block;
  width:70px;
  background-color:#dddddd;
}

Let me know when you have added these and if this works for you.