Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating a Navigation Bar with three Different Alignments using CSS
In HTML, a navigation bar is a group of buttons and images arranged either in a row or a column and used as a control site for linking particular webpages. It is regarded as one of the fundamental tools used in web design. Without affecting the content of the pages, the HTML navigation bar separates structure from content and adds creativity to the layout of the website.
Using HTML, we create a navigation bar, and CSS gives it a beautiful appearance. Additional functionality may be added using JavaScript. In HTML, a navigation bar can be implemented in a variety of ways, including horizontal, vertical, fixed, dynamic, sidebar, etc. let’s dive into the article to learn how to create a navigation bar using CSS.
Left Aligned Navigation Bar
In the left-positioned navigation bar, the image is on the left side of the navigation bar's while the entire list of links is on the right side.
Example
Let’s look at the following example, where we are going to create the left-aligned navigation bar.
<!DOCTYPE html>
<html>
<head>
<style>
* {
background-color: #D5F5E3;
}
header img {
height: 60px;
cursor: pointer;
}
li,
a,
button {
font-family: verdana;
font-weight: 200;
font-size: 13px;
color: #DE3163;
text-decoration: none;
}
header {
display: flex;
align-items: center;
padding: 15px 12%;
}
.navigate_links li {
display: inline-block;
padding: 6px 15px;
}
.navigate_links li a:hover {
color: #1C2833;
border: 1px solid #6C3483;
box-shadow: 3px 3px 3px red, 3px 3px 3px #AED6F1;
border-radius: 8px;
margin: 10px;
padding: 12px;
}
button {
margin-left: 15px;
padding: 10px 10px;
border-radius: 16px;
background-color: #F4F6F7;
color: #1C2833;
border: none;
cursor: pointer;
}
button:hover {
background-color: #ABEBC6;
color: black;
}
</style>
</head>
<body>
<header>
<img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="LOGO">
<nav>
<ul class="navigate_links">
<li>
<a href="#">Primepacks</a>
</li>
<li>
<a href="#">Courses</a>
</li>
<li>
<a href="#">Ebook</a>
</li>
<li>
<a href="#">Library</a>
</li>
</ul>
</nav>
<a href="#">
<button>Login</button>
</a>
</header>
</body>
</html>
When we run the above code, it will generate an output displaying the left-aligned navigation bar displayed on the webpage, where the image lies on the left side and all the linked pages are on the right side.
Vertical aligned Navigation Bar
The vertical navigation bar in HTML and CSS is constructed by using the Nav Tag. HTML5 added the <nav> tag, which is especially used for navigation. You can create a navigation bar with the <nav> tag and style it with CSS.
Example
Here is an example of creating a Vertical Navigation Bar using Nav Tag in HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 200px;
height: 100%;
background-color: #333;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: block;
}
a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #111;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</body>
</html>
On running the above code, the output window will pop up, displaying the vertically aligned navigation bar on the webpage. When the user tries to move the cursor over the link, it gets hovered by using CSS.
Center aligned Navigation Bar
In the center-aligned navigation bar, all the linked pages will appear at the center of the webpage.
Example
Considering the following example, we are going to create the center-aligned navigation bar on the webpage.
<!DOCTYPE html>
<html>
<head>
<style>
#nav {
position: absolute;
left: 0px;
height: 35px;
background-color: #ABEBC6;
width: 100%;
}
ul {
margin: 0;
padding: 0;
text-align: center;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
padding: 9px 12px;
display: block;
color: #DE3163;
text-align: center;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Courses</a>
</li>
<li>
<a href="#">PrimePacks</a>
</li>
<li>
<a href="#">Help</a>
</li>
</ul>
</div>
</body>
</html>
When you run the above code, it will generate an output consisting of the center-aligned navigation bar displayed on the webpage, where all the linked webpages are displayed at the center.
15 Views
