Need a full-width horizontal navigation bar

HTML-CSS
1

I have the following code to create a horizontal navigation bar however it’s not filling up the full width of the browser like I want it to. What is wrong with my code? There are no anchor tags because the html is created dynamically with javascript and it has a click event to go to the sections. This is for an assignment so it has to be done that way.

<header class="page__header">
    <nav class="navbar__menu">
	
      <!-- Navigation starts as empty UL that will be populated with JS -->
      <ul id="navbar__list"></ul>
	  
    </nav>
  </header>


#navbar__list {
list-style-type: none;
color: #FFF;
margin: 0 auto 0 auto;
padding: 0;
position: fixed;
top: 0;
width: 100%;
min-width: 100%;
overflow: auto;
}

#navbar__list li {
cursor: pointer;
background-color: #dddddd;
color: #000;
padding: 8px;
display:block;
width: 31%;
float:left;
border:1px solid #000;
text-align: center;
}
2

You could try using width: 100vw (viewport width). It’s hard to know for sure what the issue is without seeing the website, do you have a link to it?

3

Can I see what your CSS is for .page_header and .navbar_menu? It’s hard to tell what the issue is without the whole picture.

My best guess is somewhere from html to body to header to nav an extra padding/margin slipped in.

4

position:fixed does some weird things sometimes, but I think this could help:

#navbar__list {
  position: fixed;
  left:0;
  right:0;
}
5

I changed the width of the list items from 31% to 32% and now it’s the full width.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.