Member Avatar for suavedesign

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 . 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
  • 6K Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by suavedesign

Dani AI

Generated

A full-width nav is easiest if you separate the full-bleed background from the centered content, and avoid hiding overflow on the body. overflow-x:hidden can mask real layout bugs and hurt accessibility. The common cause of the left side not reaching the edge is either the body’s default margin or padding on a 100%-width element that pushes it wider than the viewport.

Try this pattern:

html, body { margin: 0; }

.site-header {
  width: 100%;
  background: #0a6; /* your bar color or gradient */
}

.site-header .inner {
  max-width: 960px;   /* your content width */
  margin: 0 auto;
  padding: 0 16px;    /* safe padding */
  box-sizing: border-box;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;    /* wraps on small/zoomed screens instead of overflowing */
}

This gives you a bar that always spans the viewport while the nav items remain constrained and centered. Put any padding on the .inner container (or use box-sizing:border-box) rather than on the 100% element; padding on a content-box 100% element can create horizontal scrollbars. Also avoid width:100vw for the bar; on systems where a vertical scrollbar is present, 100vw can be wider than the visible page and trigger overflow. MDN documents these behaviors for overflow-x, box-sizing, and viewport units (see viewport-relative lengths). If a scrollbar persists, use DevTools to find the widest child; it is almost always a single overflowing element.

Recommended Answers

All 4 Replies

Member Avatar for suavedesign

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

Member Avatar for AleMonteiro

Is something like this?

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

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="">Home</a></li>
      <li class="page_item page-item-41"><a href="">FAQ&#8217;s</a></li>
      <li class="page_item page-item-39"><a href="">Our Products</a></li>
      <li class="page_item page-item-43"><a href="">Testimonials</a></li>
      <li class="page_item page-item-70"><a href="">In The News</a></li>
      <li class="page_item page-item-45"><a href="">Contact Us</a></li>
    </ul>
  </div>
</div>
Member Avatar for suavedesign

thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.