There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Example
li {
display: inline;
}
Example explained:
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
Example explained:
Tip: Add the background-color to <ul> instead of each <a> element if you want a full-width background color:
Example
ul {
background-color: #dddddd;
}
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
Example
.active {
background-color: #04AA6D;
}
Example
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
Example
/* Add a gray right border to all list items, except the last item (last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Fixed Top NavThe navigation bar will stay at the top of the page while scrolling
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Fixed Bottom Nav
The navigation bar will stay at the bottom of the page while scrolling
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
10 videos|41 docs|23 tests
|
|
Explore Courses for Class 6 exam
|