Skip to content
Related Articles

Related Articles

Improve Article

Creating a Navigation Bar with three Different Alignments using CSS

  • Last Updated : 24 Jun, 2021

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.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        @import url(
  
        /* 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=
            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.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        @import url(
  
        * {
            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=
            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 developers choice.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        @import url(
  
        * {
            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=
            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:

               

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :