How Do I Get My Navigation Bar To Stretch Across The Screen?

Question

I have the navigation links where I want them, but I want the bar to stretch the full-width of the page. Basically, I want a blue line across the whole length of the screen and the links to stay where they are. I've tried "width:100%" but when I do that, the links become a vertical list again, instead of a horizontal line.

 .navbar { list-style-type:none; margin:0; padding:0; } .navbar2 { float:right; background-color:#1a75ff; } .navbar3 { display:block; padding:14px 16px; text-align:center; text-decoration:none; color:black; } li a.active { background-color: #0047b3; display:block; padding:14px 16px; text-align:center; text-decoration:none; color:white; } 

 <ul class="navbar"> <li class="navbar2"><a class="navbar3" href="#contactme">Contact Me</a></li> <li class="navbar2"><a class="navbar3" href="#appointment">Make An Appointment</a></li> <li class="navbar2"><a class="navbar3" href="#blog">Blog</a></li> <li class="navbar2"><a class="navbar3" href="#testimonials">Testimonials</a></li> <li class="navbar2"><a class="navbar3" href="#aboutme">About Me & My Job</a></li> <li class="navbar2"><a class="active" href="#home">Home</a></li> 

Answer 1

I switched to using display: flex; below instead of using float s like you were doing above, lemme know if this is right:

 .navbar { list-style-type:none; margin:0; padding:0; display: flex; } .navbar2 { background-color:#1a75ff; display: flex; justify-content: center; align-items: center; } .navbar3 { display:block; padding:14px 16px; text-align:center; text-decoration:none; color:black; } .navbar2.active { background-color: #0047b3; color:white; } li a.active { background-color: #0047b3; display:block; padding:14px 16px; text-align:center; text-decoration:none; color:white; } 

 <ul class="navbar"> <li class="navbar2"><a class="navbar3" href="#contactme">Contact Me</a></li> <li class="navbar2"><a class="navbar3" href="#appointment">Make An Appointment</a></li> <li class="navbar2"><a class="navbar3" href="#blog">Blog</a></li> <li class="navbar2"><a class="navbar3" href="#testimonials">Testimonials</a></li> <li class="navbar2"><a class="navbar3" href="#aboutme">About Me & My Job</a></li> <li class="navbar2 active"><a class="active" href="#home">Home</a></li> </ul> 

Answer 2

Your instinct to put width:100% was on the right track, however there were a combination of other styles interfering:

1. The navbar li items being floated was unnecessary, and causing other issues. I created the same effect by applying text-align: right to the .navbar
2. The navbar li items needed to be display: inline-block to display as desired. Otherwise, they were assuming the width of the container because the a inside of them are display: block
3. I additionally removed all the unnecessary classes, and simply styled the li by using the .navbar li selector (same concept for the a elements).

LASTLY, I applied a background to the .navbar to demonstrate it is full width. If you want it to be blue, simply change the background color to match!

 .navbar { display: block; width: 100%; list-style-type: none; margin: 0; padding: 0; background: #aaa; text-align: right; } .navbar li { display: inline-block; background-color: #1a75ff; } .navbar a { display: block; padding: 14px 16px; text-align: center; text-decoration: none; color: black; } .navbar a.active { background-color: #0047b3; display: block; padding: 14px 16px; text-align: center; text-decoration: none; color: white; } 

 <ul class="navbar"> <li><a href="#contactme">Contact Me</a></li> <li><a href="#appointment">Make An Appointment</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#aboutme">About Me & My Job</a></li> <li><a class="active" href="#home">Home</a></li> 

Answer 3

Because all of the li elements are floated, it hides the height of the parent element. Also the parent element doesn't have a background color.

Here's how I would do it.

 .navbar { list-style-type:none; margin:0; padding:0; width:100%; background-color:#1a75ff; display:block; text-align:right; } .navbar2 { display:inline-block; background-color:#1a75ff; } .navbar3 { display:block; padding:14px 16px; text-align:center; text-decoration:none; color:black; } li a.active { background-color: #0047b3; display:block; padding:14px 16px; text-align:center; text-decoration:none; color:white; } 

 <ul class="navbar"> <li class="navbar2"><a class="active" href="#home">Home</a></li> <li class="navbar2"><a class="navbar3" href="#aboutme">About Me & My Job</a></li> <li class="navbar2"><a class="navbar3" href="#testimonials">Testimonials</a></li> <li class="navbar2"><a class="navbar3" href="#blog">Blog</a></li> <li class="navbar2"><a class="navbar3" href="#appointment">Make An Appointment</a></li> <li class="navbar2"><a class="navbar3" href="#contactme">Contact Me</a></li> </ul> 

Answer 4

You can configure your navbar to stretch across any screen width using CSS flexbox. This can be done by adding just a few lines of CSS to your existing code:

ul.navbar {
  list-style-type:none;
  margin:0;
  padding:0;
  width:100%;
  display:flex;
  flex-direction:row-reverse;
}

li.navbar2 {
  flex-grow:1;
  align-self:center;
  height:100%;
    background-color:#1a75ff;
}

a.navbar3 {
    display:block;
    padding:14px 16px;
    text-align:center;
    text-decoration:none;
    color:black;
}

li a.active {
    background-color: #0047b3;
    display:block;
    padding:14px 16px;
    text-align:center;
    text-decoration:none;
    color:white;
}

You may view the resulting navbar here: https://codepen.io/aaronadler/pen/vzBOeN