0

How can I make a nav bar stretch the entire width of the browser (every size browser, even when zoomed in or out) without getting a horizontal scroll bar?
The url to my site is www.accupresh.com. I have a nav bar that I want to be stretched to fill the entire width of the browser, no matter what the size of the screen. How can I do that without getting a horizontal scrollbar at the bottom?
Thanks!

3
Contributors
4
Replies
6
Views
4 Years
Discussion Span
Last Post by suavedesign
0

I managed to make it stretch on the right side, by adding padding, and then

overflow-x:hidden;

overflow-x:hidden; to the body.
But how can I make the left side stretch? Adding padding would just push over all the tabs.
Url is www.accupresh.com

0

Is something like this?

.my-nav-bar {
    width: 100%; /* the parent must have 100% either */
    overflow: hidden; /* hides overflow */
}
0

Wrap your nav div in a wrapper div. Set the wrapper div width:100% set the nav div to the width of the page content than margin:0 auto; :

.nav_wrapper{
  width:100%;
  background-color: #FFF; //Change this to the background color of your nav bar
}

.nav_bar{
  width: 800px; //Change this to the actual width of the page content
  margin: 0 auto;
}



<div class="nav_wrapper">
  <div class="nav_bar">
    <ul id="nav_menu">
      <li class="page_item page-item-120 current_page_item"><a href="http://www.accupresh.com/">Home</a></li>
      <li class="page_item page-item-41"><a href="http://www.accupresh.com/faqs/">FAQ&#8217;s</a></li>
      <li class="page_item page-item-39"><a href="http://www.accupresh.com/our-products/">Our Products</a></li>
      <li class="page_item page-item-43"><a href="http://www.accupresh.com/testimonials/">Testimonials</a></li>
      <li class="page_item page-item-70"><a href="http://www.accupresh.com/in-the-news/">In The News</a></li>
      <li class="page_item page-item-45"><a href="http://www.accupresh.com/contact-us/">Contact Us</a></li>
    </ul>
  </div>
</div>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.