XresponsiveNav.html

<!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>Responsive Top Navigation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        *{
            margin: 0;padding: 0;
            font-family: poppins;
        }
        .topnav{
            background-color: #333;
            overflow: hidden;
        }
        .topnav a{
            float: left;
            color: #f2f2f2;
            text-decoration: none;
            font-size: 17px;
            padding: 14px 16px;
            display: block;
            text-align: center;
        }
        .topnav a:hover{
            background-color: #ddd;
            color: black;
        }
        .topnav a.active{
            background-color: #04AA6D;
            color: white;
        }
        .topnav .icon{
            display: none;
        }

        /* Media Queries  */
        @media screen and (max-width: 600px){
            .topnav a:not(:first-child){display: none;}
            .topnav a.icon{
                float: right;
                display: block;
            }
        }
        /* The responsive class is added to the topnav with javascript when the user clicks on the icon. This class makes the topnav look good on small screen(display the links vertically instead of horizontally ) */
        @media screen and (max-width: 600px){
            .topnav.reponsive{position: relative;}
            .topnav.responsive a.icon{
                position: absolute;
                right: 0;
                top: 0;
            }
            .topnav.reponsive a{
                float: none;
                display: block;
                text-align: left;
            }
        }
    </style>
</head>
<body>
    <div class="topnav" id="myTopnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
        </a>
    </div>

<script>
    // Toogle between adding and removing the responsive class to topnav when the user clicks on the icon 
    function myFunction(){
        var x= document.getElementById("myTopnav");
        if(x.className === "topnav"){
            x.className += " responsive";
        }else{
            x.className = "topnav";
        }
    }
</script>
</body>
</html>