title: Make navigation menu span length of browser
body: <p>I am trying to get my navigation menu to span the entire length of my blog. Right now it is off center to the right and a bit too short. How do I make it longer?</p>
  
  <p>Also, you'll notice that my navigation menu is not at the very top of the page, which is where I would like it to be. How do I fix that as well?</p>
  
  <p>And that's not it! My navigation menu is sticky, but when you scroll past it.. it gets thrown to the left side of the page. What to do?</p>
  
  <p>Thanks in advance for your help!</p>
  
  <p>Below is some of the code. And here is the site: <a href="http://www.studywithstyleblog.com" rel="nofollow">http://www.studywithstyleblog.com</a></p>
  
  <pre><code>&lt;div id="navigationbar"&gt;
  #cssnav { 
  border: 0px;
  margin: 0px;
  padding: 0px;
  width: auto;
  font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
  color: $(tabs.text.color); /* Template Designer - Change Font Size */
  }
  #cssnav ul {
  #cssnav ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none; /* Template Designer - Change Menu Background */
  height: 40px; /* Change Height of Menu */
  list-style: none;
  text-align: center;
  margin: 0px;
  padding: 0px;
  }
  #cssnav li {
  float: none; /* none = centre */
  display: inline-block;
  padding: 0px;
  }
  #cssnav li a {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none; /* Template Designer - Change Menu Background */
  display: block;
  margin: 0px;
  text-align: center;
  font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
  text-decoration: none;
  }
  #cssnav &gt; ul &gt; li &gt; a {
  color: $(tabs.text.color); /* Template Designer - Change Font Color */
  }
  #cssnav ul ul a { 
  color: $(tabs.text.color); /* Template Designer - Change Color */
  }
  #cssnav li &gt; a:hover, #cssnav ul li:hover {
  color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
  background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
  text-decoration: none;
  }
  #cssnav li ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none; /* Template Designer - Change Menu Background */
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: -5px;
  position: absolute;
  width: 300px; /* Change Width Of DropDown Menu */
  z-index:9999;
  }
  #cssnav li:hover ul {
  }
  #cssnav li li {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none; /* Template Designer - Change Background */
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 300px; /* Change Width Of DropDown Menu */
  }
  #cssnav li:hover li a {
  background: #FFFFFF; /* Template Designer - Change Background of Link on Hover */
  }
  #cssnav li ul a {
  display: block;
  height: auto;
  margin: 0px;
  padding: 10px;
  text-align: left;
  }
  #cssnav li ul a:hover, #cssnav li ul li:hover &gt; a {
  color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
  background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
  border: 0px;
  text-decoration: none;
  }
  /*-------- Begin Drop Down Menu -------*/
  </code></pre>