Creating a Navigation Bar with three Different Alignments using CSS

Last Updated : 09 May, 2023

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.

HTML

<!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.

HTML

<!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.

HTML

<!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:

Suggest improvement

How to create advanced Loading Screen using CSS ?

How to create HTML form that accept user name and display it using PHP ?

Share your thoughts in the comments

Creating a Navigation Bar with three Different Alignments using CSS

HTML

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?