CSS
Navigation Bar

Here are some steps to create navigation bar using HTML and CSS.

HTML Steps

Below elements need to be created in HTML.

  • Nav element i.e. <nav>
  • List tag i.e. <ul>
  • list items i.e. <li>
  • a link tag i.e. <a>

Put the values in tag.

Copy Code 


<nav>
    <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="about"><a href="#">About</a></li>
        <li class="about"><a href="#">HTML</a></li>
        <li class="news"><a href="#"><a class="active" href="#">CSS</a></li>
        <li class="contact"><a href="#">Contact</a></li>
    </ul>
</nav>

CSS Styling

Styling <ul>

Copy Code 


<style type="text/css">
    nav ul {
        list-style: none;
        background-color: #343a40;
        text-align: center;
        padding: 0;
        margin: 0;
    }
</style>

Styling <li>

Copy Code 


              
<style type="text/css">
    nav li {
        font-family: 'Oswald', sans-serif;
        font-size: 3.2em;
        line-height: 40px;
        height: 40px;
        border-bottom: 1px solid #888;
    }  
</style>

Styling <a>

Copy Code 


<style type="text/css">
    nav a {
        text-decoration: none;
        color: #fff;
        display: block;
        transition: .3s background-color;
    }
             
    nav a:hover {
        background-color: #007bff;
    }
             
    nav a.active {
        background-color: #fff;
        color: #444;
        cursor: default;
    } 
</style>

Making navigation responsive

Copy Code 


<style type="text/css">
    @media screen and (min-width: 600px) {
        nav li {
            width: 120px;
            border-bottom: none;
            height: 50px;
            line-height: 50px;
            font-size: 1.4em;
        }

        nav li {
            display: inline-block;
            margin-right: -4px;
        }
    }
</style>

Complete Code for Navigation Bar

Copy Code 


<!doctype html>  
<html>
<head>
    <title>Testing</title>

    <style type="text/css">

        nav ul {
            list-style: none;
            background-color: #343a40;
            text-align: center;
            padding: 0;
            margin: 0;
        }
        nav li {
            font-family: 'Oswald', sans-serif;
            font-size: 1.2em;
            line-height: 40px;
            height: 40px;
            border-bottom: 1px solid #888;
        }
         
        nav a {
            text-decoration: none;
            color: #fff;
            display: block;
            transition: .3s background-color;
        }
         
        nav a:hover {
            background-color: #007bff;
        }
         
        nav a.active {
            background-color: #fff;
            color: #444;
            cursor: default;
        }
         
        @media screen and (min-width: 600px) {
            nav li {
                width: 120px;
                border-bottom: none;
                height: 50px;
                line-height: 50px;
                font-size: 1.4em;
            }

            nav li {
                display: inline-block;
                margin-right: -4px;
            }
         
        }


    </style>
</head>

<body>
  <header>
    <nav>
      <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="about"><a href="#">About</a></li>
        <li class="about"><a href="#">HTML</a></li>
        <li class="news"><a href="#"><a class="active" href="#">CSS</a></li>
        <li class="contact"><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>
</body>
</html>