CSS NAVIGATION BAR
CSS HORIZONTAL NAVIGATION BAR
Horizontal Navigation Bar There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Inline List Items
One way to build a horizontal navigation bar is to specify the
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
/*display inline*/
li {
display: inline;
</style>
<body>
<header>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</header>
</body>
</html>
Example explained:
Display: inline; - By default,
Floating List Items
Another way of creating a horizontal navigation bar is to float the <li>velements, and specify a layout for the navigation links:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
/*float*/
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: pink;
}
</style>
<body>
<header>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</header>
</body>
</html>
- float: left; - use float to get block elements to slide next to each other
- display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify padding (and height, width, margins, etc. if you want)
- padding: 8px; - Since block elements take up the full width available, they cannot float next to each other. Therefore, specify some padding to make them look good
- background-color: pink- Add a pink background-color to each a element(Add the background-color to ul instead of each a element if you want a full-width background color)
Horizontal Navigation with flexbox
We use css flex to create the horizontal bar placing <li> item at the right side of the navbar.
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
.active {
background-color: #4CAF50;
}
/*Right-align links is given by floating the list items to the right
Gray Horizontal Navbar with a sticky position
In this example we will have a gray horizontal navigation bar with a thin gray border and make it stick. To get a sticky navbar you add position: sticky; to <ul>. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
*{
margin:0;
padding:0;
}
.topnav{
height:2vh;
background:black;
}
header{
width:100%;
height:7vh;
background:gray;
display:flex;
justify-content:right;
align-items:center;
top:-1.1vh;
position:sticky;
}
ul {
list-style-type: none;
display:flex;
}
li a {
color: #fff;
text-decoration: none;
font-size:20px;
}
/* Change the link color on hover */
li a:hover {
color: #555;
font-size:21px;
}
/*float left*/
li {
margin-right:10px;
}
.content{
height:110vh;
display:flex;
justify-content:center;
align-items:center;
font-size:50px;
}
Note: Internet Explorer do not support sticky positioning. Safari requires a -webkit- prefix (see example above). You must also specify at least one of top, right, bottom or left for sticky positioning to work.
