Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 with three different alignments.
Syntax
/* Basic Navigation Bar Structure */
nav {
display: flex; /* or inline-block for traditional approach */
justify-content: flex-start | center | flex-end;
align-items: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block; /* for horizontal */
/* OR display: block; for vertical */
}
Left Aligned Navigation Bar
In the left-positioned navigation bar, the image is on the left side of the navigation bar 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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #D5F5E3;
font-family: verdana, sans-serif;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 5%;
background-color: #D5F5E3;
}
header img {
height: 60px;
cursor: pointer;
}
.navigate_links {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.navigate_links li {
margin: 0 15px;
}
.navigate_links li a {
font-weight: 200;
font-size: 13px;
color: #DE3163;
text-decoration: none;
padding: 6px 15px;
transition: all 0.3s ease;
}
.navigate_links li a:hover {
color: #1C2833;
border: 1px solid #6C3483;
box-shadow: 3px 3px 3px red, 3px 3px 3px #AED6F1;
border-radius: 8px;
padding: 12px;
}
button {
padding: 10px 20px;
border-radius: 16px;
background-color: #F4F6F7;
color: #1C2833;
border: none;
cursor: pointer;
font-family: verdana, sans-serif;
font-size: 13px;
}
button:hover {
background-color: #ABEBC6;
color: black;
}
</style>
</head>
<body>
<header>
<img src="/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>
A horizontal navigation bar appears with a logo on the left side, navigation links (Primepacks, Courses, Ebook, Library) in the center, and a Login button on the right. The links have hover effects with colored borders and shadows.
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>
body {
margin: 0;
font-family: Arial, sans-serif;
}
nav {
width: 200px;
height: 100vh;
background-color: #333;
position: fixed;
left: 0;
top: 0;
}
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;
border-bottom: 1px solid #555;
transition: background-color 0.3s;
}
a:hover {
background-color: #111;
}
.content {
margin-left: 200px;
padding: 20px;
}
</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>
<div class="content">
<h1>Main Content Area</h1>
<p>This is the main content area next to the vertical navigation.</p>
</div>
</body>
</html>
A dark vertical navigation bar appears on the left side of the page with links (Home, About, Services, Contact) stacked vertically. The main content area appears to the right of the navigation. Hovering over links changes their background color to a darker shade.
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>
body {
margin: 0;
font-family: Arial, sans-serif;
}
#nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #ABEBC6;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
ul li {
margin: 0 10px;
}
ul li a {
text-decoration: none;
padding: 12px 20px;
display: block;
color: #DE3163;
font-weight: 500;
border-radius: 5px;
transition: all 0.3s ease;
}
ul li a:hover {
background-color: #85C1E9;
color: white;
transform: translateY(-2px);
}
.content {
margin-top: 70px;
padding: 20px;
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>
<div class="content">
<h1>Welcome to Our Website</h1>
<p>This content appears below the center-aligned navigation bar.</p>
</div>
</body>
</html>
A horizontal navigation bar appears fixed at the top of the page with links (Home, Courses, PrimePacks, Help) centered horizontally. The navigation has a light green background, and links have hover effects with color changes and a subtle upward movement. Content appears below the navigation bar.
Conclusion
Navigation bars are essential components of web design that can be aligned in different ways using CSS flexbox and positioning properties. Each alignment serves different design purposes left-aligned for branding with navigation, vertical for sidebar menus, and center-aligned for focused navigation experiences.
454 Views
