CSS Navigation Bar
CSS Navigation Bar
A navigation bar is part of a graphical user interface (GUI) that helps users navigate a website, application, or other software. It’s crucial for users to quickly and easily navigate to the content they’re looking for.
A navigation bar can be horizontal or vertical and contain links to important pages or features. A navigation bar can also contain other elements, such as the website or application’s logo, a search bar, or social media icons. You can use CSS to style a navigation bar to change its appearance.
CSS Horizontal Navigation Bar
The following example shows a horizontal navigation bar, which is the most common type of navigation bar and appears at the top of a web page as follows −
<html>
<head>
<style>
ul {
background-color: #28bf17;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
li a {
display: block;
color: #f2f2f2; text-align: center;
padding: 10px;
text-decoration: none;
font-size: 17px;
}
li a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
</style>
</head>
<body>
<ul>
<li>Tutorialspoint</li>
<li>Home</li>
<li>Articles</li>
<li>Courses</li>
<li>eBook</li>
</ul>
<h1>Welcome to TutorialsPoint</h1>
<h3>Simple, Easy Learning at your fingertips</h3>
</body>
html>
CSS Vertical Navigation Bar
A vertical navigation bar is also called a sidebar menu. It’s usually located on the left or right side of the screen.
The following is an example −
<html>
<head>
<style>
ul {
background-color: #28bf17;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
}
li {
text-align: center;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 17px;
}
li a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
</style>
</head>
<body>
<ul>
<li>Tutorialspoint</li>
<li>Home</li>
<li>Articles</li>
<li>Courses</li>
<li>eBook</li>
</ul>
</body>
</html>
CSS Drop-Down Navigation Bar
A drop-down navigation bar is a navigation bar that displays a drop-down menu when the user hovers over a link. A drop-down menu is a way to display a list of related items in a limited space.
Here is an example:
<html>
<head>
<style>
.navbar {
background-color: #28bf17;
overflow: hidden;
}
.navbar a {
display: block;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 15px;
}
.navbar a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
.dropdown {
float: left; }
.dropdown .dropbtn {
border: none;
color: #f2f2f2;
padding: 10px;
background-color: #28bf17;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c7385a;
min-width: 120px;
}
.dropdown-content a {
float: none;
color: #f2f2f2;
padding: 10px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #dd9ede;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body> <nav class="navbar">
Tutorialspoint
Home
<div class="dropdown">
<button class="dropbtn">Articles</button>
<div class="dropdown-content">
HTML
CSS
Bootstrap
</div>
</div>
Courses
eBook
</nav>
<h1>Welcome to TutorialsPoint</h1>
<h3>Simple Easy Learning at your fingertips</h3>
</body>
</html>
CSS Fixed Navigation Bar
A fixed navigation bar is a navigation bar that stays fixed at the top of the screen as the user scrolls down the page. To make the navigation bar fixed, you can use the position: fixed property.
Here is an example –
<html>
<head>
<style> body {
margin: 0;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: #28bf17;
}
.navbar a {
display: block;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
.heading {
padding-top: 170px;
text-align: center;
background-color: #e6e451;
padding-bottom: 300px
}
</style>
</head>
<body>
<nav class="navbar">
Tutorialspoint
Home
Articles
Courses
eBook
</nav>
<div class="heading">
<h1>Welcome to TutorialsPoint</h1>
<h2>Tutorialspoint CSS Fixed Navbar</h2>
<h3>Simple, Easy Learning at Your Fingertips</h3>
</div>
</body>
</html>
CSS Sticky Navbar
You can use the position: sticky property to create a sticky navigation bar that stays at the top of the screen even when the user scrolls down the page.
The following is an example−
<html>
<head>
<style>
body {
margin: 0;
}
.navbar {
position:sticky;
top: 0;
width: 100%;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: #28bf17;
}
.navbar a {
display: block;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #dd9ede; color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
.heading {
padding-top: 170px;
text-align: center;
background-color: #e6e451;
padding-bottom: 300px
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>Scroll down to see the effect</h1>
<nav class="navbar">
Tutorialspoint
Home
Articles
Courses
eBook
</nav> <div class="heading">
<h1>Welcome to TutorialsPoint</h1>
<h2>TutorialsPoint CSS Sticky Navbar</h2>
<h3>Simple Easy Learning at your fingertips</h3>
</div>
</body>
</html>
Navigation Bar Divider
You can also use the border-right property to add a divider between links in the navigation bar, like this:
<html>
<head>
<style>
.navbar {
background-color: #28bf17;
overflow: hidden;
}
.navbar a {
display: block;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 17px;
border-right: 2px solid #f013c8;
}
.navbar a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
</style>
</head>
<body>
<nav class="navbar">
Tutorialspoint
Home
Articles
Courses
eBook
</nav>
<h1>Welcome to TutorialsPoint</h1>
<h2>TutorialsPoint CSS Navbar with borders</h2>
</body>
</html>
Fixed Vertical Navbar
The following example demonstrates how to use the position: fixed property to create a fixed vertical navigation bar, ensuring that the navigation bar always remains on the left side of the screen, even if the user scrolls down the page.
<html>
<head>
<style>
ul {
position: fixed;
background-color: #28bf17;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
height: 100%;
}
li {
text-align: center;
border-bottom: 2px solid #f013c8;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 17px;
}
li a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
.heading {
padding-top: 170px;
text-align: center;
background-color: #e6e451;
padding-bottom: 300px
}
</style>
</head>
<body>
<ul>
<li>Tutorialspoint</li>
<li>Home</li>
<li>Articles</li>
<li>Courses</li>
<li>eBook</li>
</ul>
<div class="heading">
<h1>Welcome to TutorialsPoint</h1>
<h2>Tutorialspoint CSS Fixed Vertical Navbar</h2>
<h3>Simple Easy Learning at your fingertips</h3>
</div>
</body>
</html>