Creating a Navigation Bar with three Different Alignments using CSS
Last Updated :
09 May, 2023
Improve
In this article, we are going to create a navigation bar with three different positions i.e left, right and Centre. To understand this article we need to understand some basic HTML and CSS.
Approach:
- Here we are going to make a navigation bar for EBook websites.
- The tags we are going to use for the Navigation bar is header, image, nav, button. Here we're going to target each tag individually.
- Here we are going to try 3 different positions for the navigation bar i.e left, right, and Centre.
- After writing HTML, we will focus on CSS, or we will use a style tag on HTML to make the website Navbar attractive.
1. Left Aligned Navigation Bar: In the left-positioned navigation bar, all list of links is on the right side i.e. left aligned and the image is on the left side which is right-aligned.
Example: Here we are using the above-explained method.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url(
'https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
/* First make all margin and padding 0 */
* {
margin: 0px;
padding: 0px;
background-color: rgb(19, 6, 6);
}
/* Second work on image*/
header img {
display: block;
height: 84px;
cursor: pointer;
margin-right: auto;
}
/* Changes the styling of links if necessary */
li,
a,
button {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 16px;
color: whitesmoke;
text-decoration: none;
}
/* Now start positioning the links and images
according to your convinence */
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
}
.navigate_links {
list-style: none;
}
.navigate_links li {
display: inline-block;
padding: 10px 20px;
}
.navigate_links li a {
transition: all 0.3s ease-in-out 0s;
}
/* Add some transition to make navigation
bar attractive */
.navigate_links li a:hover {
color: greenyellow;
border: 2px solid blue;
box-shadow: 3px 3px 3px red, 3px 3px 3px blue;
border-radius: 8px;
margin: 10px;
padding: 12px;
}
button {
margin-left: 70px;
padding: 9px 12px;
border-radius: 15px;
background-color: rgb(89, 61, 248);
color: rgb(243, 236, 236);
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out 0s;
}
button:hover {
background-color: rgb(219, 221, 81);
color: black;
}
</style>
</head>
<body>
<header>
<img class="logo"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210401193733/geeksforgeeks.png"
alt="Loading image">
<nav>
<ul class="navigate_links">
<li><a href="#">Popular</a></li>
<li><a href="#">New</a></li>
<li><a href="#">Ebook</a></li>
<li><a href="#">Reading-List</a></li>
<li><a href="#">Topics</a></li>
</ul>
</nav>
<a class="signin" href="#">
<button>Get it for free</button>
</a>
</header>
</body>
</html>
Output:
2. Centre-Aligned Navigation Bar: In the Centre-aligned navigation bar, all the links are at the Centre, the logo is right-aligned and the button is left-aligned all these things can be done only from one line of code.
Example: In this example, we are using the above-explained method.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url(
'https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
* {
margin: 0px;
padding: 0px;
background-color: rgb(7, 6, 6);
}
header img {
display: block;
height: 84px;
cursor: pointer;
}
li,
a,
button {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 16px;
color: whitesmoke;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.navigate_links {
list-style: none;
}
.navigate_links li {
display: inline-block;
padding: 0px 20px;
}
.navigate_links li a {
transition: all 0.3s ease-in-out 0s;
}
button {
padding: 9px 12px;
border-radius: 15px;
background-color: rgb(89, 61, 248);
color: rgb(243, 236, 236);
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out 0s;
}
.navigate_links li a:hover {
color: greenyellow;
border: 2px solid blue;
box-shadow: 3px 3px 3px red, 3px 3px 3px blue;
border-radius: 4px;
margin: 10px;
padding: 12px;
}
button:hover {
background-color: rgb(219, 221, 81);
color: black;
}
</style>
</head>
<body>
<header>
<img class="logo"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210401193733/geeksforgeeks.png"
alt="Loading image">
<nav>
<ul class="navigate_links">
<li><a href="#">Popular</a></li>
<li><a href="#">New</a></li>
<li><a href="#">Ebook</a></li>
<li><a href="#">Reading-List</a></li>
<li><a href="#">Topics</a></li>
</ul>
</nav>
<a class="signin" href="#">
<button>Get it for free</button>
</a>
</header>
</body>
</html>
Output:
3. Right Aligned Navigation Bar: In the right-aligned navigation bar, the navigation links are rights aligned, and all other links like button and logo depend on the developer's choice.
Example: Here is the example of above explained method.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url(
'https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
* {
margin: 0px;
padding: 0px;
background-color: rgb(12, 9, 9);
}
header img {
display: block;
height: 84px;
cursor: pointer;
/* margin-right: auto; */
order: 3;
margin-left: auto;
}
li,
a,
button {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 16px;
color: whitesmoke;
text-decoration: none;
}
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
order: 1;
}
.navigate_links {
list-style: none;
}
.navigate_links li {
display: inline-block;
padding: 0px 20px;
}
.navigate_links li a {
transition: all 0.3s ease-in-out 0s;
}
button {
margin-left: 20px;
padding: 9px 12px;
border-radius: 15px;
background-color: rgb(89, 61, 248);
color: rgb(243, 236, 236);
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out 0s;
}
.navigate_links li:nth-child(1) {
padding: 0px 20px 0px 0px;
}
.navigate_links li a:hover {
color: greenyellow;
border: 2px solid blue;
box-shadow: 3px 3px 3px red, 3px 3px 3px blue;
border-radius: 4px;
margin: 10px;
padding: 12px;
}
button:hover {
background-color: rgb(219, 221, 81);
color: black;
}
</style>
</head>
<body>
<header>
<img class="logo"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210401193733/geeksforgeeks.png"
alt="Loading image">
<nav>
<ul class="navigate_links">
<li><a href="#">Popular</a></li>
<li><a href="#">New</a></li>
<li><a href="#">Ebook</a></li>
<li><a href="#">Reading-List</a></li>
<li><a href="#">Topics</a></li>
</ul>
</nav>
<a class="signin" href="#">
<button>Get it for free</button>
</a>
</header>
</body>
</html>
Output:
