Help with navigation bar to extend infinitely

Get Started
1

Hello everyone, I’m a bit new to designing a website. I’m currently working on a class project and it involves creating a page with a large photo as a background. I searched around and got an idea of how it’s generally done. This website: http://www.alley-pfannekuchen.de/ has their navigation bar extending on the x-axis.

When I zoom out I noticed its an image, I think–because at a certain point it stops. But I was wondering is their an easier way (maybe a code?) to have a colored rectangle type of box that repeats?

Thanks :slight_smile:

2

Welcome to SitePoint!

You can do something like this:


<div id="nav">
<ul>  
 <li><a href="mysite.com">Title</a></li>  
 <li><a href="mysite.com">Title</a></li>  
 <li><a href="mysite.com">Title</a></li>  
 <li><a href="mysite.com">Title</a></li> 
</ul>
</div>

And in your CSS:


#nav {
  width:100%; /* make it stretch the to the entire width of the viewport */    
  background:black;
}

#nav ul {
  list-style:none; 
  margin:0;
}

#nav li {    
  display:inline;    
  padding:0;
}

#nav a:link, #nav a:visited {
  color: white;       
  text-decoration:none;   
  line-height:2; /* calculate height of surrounding box */    
  margin:0;    
  padding: 2em;
}    

#nav a:hover, #nav a:focus {
  color: black;        
  background:white;
}