Navigation Bar in HTML-CSS | How to make a navbar in html and css in 3 easy steps -Codestarshub

August 07, 2021
Read

Navigation Bar is a very important element of a website or a web page. It helps the user to easily locate and navigate through the website.


Navigation Bar is just a list of links

Navigation bars are just a group of lists ordered and styled using CSS.

We generally use unordered lists for navigation bars.


So lets begin:


STEP 1: Creating the layout


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="navbar">
    <nav>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>
</div>
    
</body>
</html>


STEP 2: 

Remove list-styling i.e remove bullets, Make the lists horizontal using flexbox.


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            <!-- used to remove margin or padding between any element and the page-->
            margin:0; 
            padding: 0;
        }
        body {
            background-color: aqua;
        }

        .navbar{
            background-color: crimson;
        }

        ul {
            position: relative; <!-- makes it relative to the parent body i.e div -->
            left: 10%; <!-- shifts 10% from left -->
            display: flex; <!-- arranges in flexbox style i.e horizontally -->
        }

        li {
            list-style: none;
            padding: 10px; <!-- adds padding between list items-->
        }
    </style>
</head>


STEP 3: 

Further styling

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{

            margin:0; 
            padding: 0;
        }
        body {
            background-color: aqua;
        }

        .navbar{
            height:60px;
            background-color: crimson;
        }

        ul {
            
            position: relative;
            left: 10%;
            display: flex;
        }

        li {
            margin-top: 5px;
            list-style: none;
            padding: 10px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 20px;;
        }
        li:hover{
            cursor: pointer;
            color: wheat;
            transition: .4s;
            transform: scale(1.2);
        }
    </style>
</head>

Preview:




Full code :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{

            margin:0; 
            padding: 0;
        }
        body {
            background-color: aqua;
        }

        .navbar{
            height:60px;
            background-color: crimson;
        }

        ul {
            
            position: relative;
            left: 10%;
            display: flex;
        }

        li {
            margin-top: 5px;
            list-style: none;
            padding: 10px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 20px;;
        }
        li:hover{
            cursor: pointer;
            color: wheat;
            transition: .4s;
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <div class="navbar">
        <nav>
            <ul>
                <li>Home</li>
                <li>About US</li>
                <li>Contact us</li>
                <li>Gallery</li>
            </ul>
        </nav>
    </div>

</body>

</html>







Tags :

2 comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.