I'm trying to maneuver a Wordpress theme's nav bar alongside its designated logo design area with no success (such as this: http://screencast.com/t/UsPhTZ3SM) Any ideas? This is actually the header.php code: http://pastebin.com/mr7mtpMG

Thank you,

Alex

Personally and seeking to merely slowly move the Nav underneath the header, I'd just switch these sections. But that is me, and I am a large fan of learning from mistakes...

<div id="top-header"> <!-- top navigation bar -->
     .....
</div><!--end header-->

<div class="clear"></div>

<div id="header"><!-- header -->
     .....
</div><!-- end header -->

Change to:

<div id="header"><!-- header -->
     .....
</div><!-- end header -->

<div class="clear"></div>

<div id="top-header"> <!-- top navigation bar -->
     .....
</div><!--end header-->

However, I am the kind of person that does not mind breaking things within the interest of learning...

I'd re-format the html and cleanup the css(too many unnecessary floats), but when you'll need a fast solution, try the next:


- #top-header, add position: absolute and margin-left: 26em

- #nav-pages li, add display: inline-block

  • take away the following qualities:

#top-header, width: 930px

#top-header-left, float: left, display: inline

#nav-pages, #nav-pages ul, float: left

#nav-pages li, float: left

NOTE: Not examined on everyones favorite, IE

Hope this will make sense