Full stretch horizontal menu - php

Question

Anyone can help me figure out how to stretch out my menu like this http://heatfreehair.com/
Here's how mine is looking right now http://dev1.envisionwebdesign.co/
Below is the php code for the wordpress based site.
<header id="header" class="col-full">
<nav id="navigation" class="col-full" role="navigation">
<?php
if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fr', 'theme_location' => 'primary-menu' ) );
} else {
?>
<ul id="main-nav" class="nav fl">
<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
<li class="<?php echo $highlight; ?>"><?php _e( 'Home', 'woothemes' ); ?></li>
<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
</ul><!-- /#nav -->
<?php } ?>
</nav><!-- /#navigation -->
</header><!-- /#header -->
Below is the css
#navigation {
float: left;
clear: both;
margin-bottom: 0;
display: none;
}
#header #navigation {
display: block !important;
margin-top: 150px;
}
#header #navigation ul.nav {
float: left;
}
#header #navigation ul.nav > li a {
background: #000000;
float: left;
height: 30px;
line-height: 30px;
display: block;
font-family: "Agency", Verdana;
font-size: 21px;
font-weight: normal;
color: #ffffff;
height: 30px;
padding: 0 44px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
text-transform: uppercase;
}
#header #navigation ul.nav > li a:hover {
border-color: #e8e3e5;
background: #000000;
color: #f91483;
}
#header #navigation ul.nav > li:hover a {
background: #fff;
}
#header #navigation ul.nav > li.current-menu-item > a,
#header #navigation ul.nav > li.current_page_item > a {
color: #f91483;
}
#header #navigation ul.nav > li.parent a {
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#header #navigation ul.nav > li.parent a:after {
font-family: 'Agency';
display: inline-block;
font-size: .857em;
margin-left: .618em;
content: ";";
color: #ffffff;
font-weight: normal;
}
#header #navigation ul.nav > li.parent a:hover:before {
content: "";
display: block;
height: 2px;
position: absolute;
bottom: -1px;
left: 0;
right: 0;
background: #fff;
z-index: 99999;
}
#header #navigation ul.nav > li.parent:hover a:before {
content: "";
display: block;
height: 2px;
position: absolute;
bottom: -1px;
left: 0;
right: 0;
background: #fff;
z-index: 99999;
}
#header #navigation ul.nav > li.parent:hover a:after {
color: #ff007b;
}
#header #navigation ul.nav > li.parent ul li a:after {
visibility: hidden;
}
#header #navigation ul.nav > li.parent ul li.parent a:after {
visibility: visible;
content: "]";
float: right;
}
#header #navigation ul.nav > li.parent ul li.parent ul li a:after {
visibility: hidden;
}
#header #navigation ul.nav > li.parent ul li.parent ul li.parent a:after {
visibility: visible;
content: "]";
}
#header #navigation ul.nav > li.parent ul li.parent ul li.parent ul li a:after {
visibility: hidden;
}
#header #navigation ul.nav ul {
border: none;
margin-top: -1px;
padding: .372em 0;
box-shadow: 0 0.202em 0 0 rgba(232, 227, 229, 0.4);
-webkit-box-shadow: 0 0.202em 0 0 rgba(232, 227, 229, 0.4);
background: #fff;
}
#header #navigation ul.nav ul ul {
left: 100%;
top: -0.372em;
}
h3.nav-toggle {
display: none;
}

Answer 1

This should get you on your way. Trick is to have your nav inside a dive that stretches. Make the nav relative with a set width and then set margin as shown.
the parent div with class fullstretch is automatically width=100% towards the parent conbtainer.
<div class="fullstretch">
<nav></nav>
</div>
body {
margin:0;
}
.fullstretch {
position: relative;
background: #000;
padding: 5px 0;
}
.fullstretch nav {
width: 800px;
position: relative;
margin: 0 auto;
background: #fff;
}

Answer 2

There are 2 ways
pure css
Add this
width: 100%
to your navigation css selector. But if you load your window with not occupying the
whole screen, and then maximize it. you will notice that it doesn't keep intact with the maximum width. Unless if you reload the page again with the maximum window size of course.
However
with javascript
Get the window width
Set the navigation to be the same width as window width (make this
as a function. say function A)
Add event handler to window so that when size window change --> run function A
Hope this gives you an idea for your planning.