Responsive Nav Bar 

review of navbar

Font Awsome cdn link

 <script src="https://kit.fontawesome.com/6d985e968b.js"

 crossorigin="anonymous"></script>

CSS

<style>

            *{

                padding: 0;

                margin: 0;

                list-style: none;

                box-sizing: border-box;

            }

            .navbar{

                width: 100%;

                height: 50px;

                background-color:#000;

                

                

            }

            .logo{

                color:#fff;

                width: 200px;

                float: left;

                font-size: 30px;cursor: pointer;

                margin-left: 50px;

                line-height: 40px;

                

            }

            .navbar ul{

                margin-right: 50px;

                float: right;

                line-height: 40px;

               

            

            }

            .navbar ul li{

                display: inline-block;

                margin: 10px 10px;

            }

            .navbar ul li a{

                text-decoration: none;

                color: #fff;

            }

            .active a:hover{

                background-color: blue;

            }

            .toggler{

                color: #fff;

                float:right;

                margin-right:50px;

                margin-top: 10px;

                display: none;

                cursor: pointer;

            }

            .cut{

                cursor: pointer;

                display:none;

            }

            @media (max-width: 768px){

                .logo{

                    font-size:20px;

                    margin-left: 10px;

                    margin-top:10px;

                }

                .toggler{

                    display:block;

                }

                .navbar ul{

                  position:fixed;

                  top:50px;

                  left:-100%;

                    width: 100%;

                    height:100vh;

                    background-color:greenyellow;

                    margin-right: 0;

                    text-align: center;

                    transition: all,0.5s;

                }

               .navbar ul li{

                    display:block;

                }

                .navbar ul li a{

                    font-size:20px;

                }

                .cut{

                    display:block;

                    position: absolute;

                    top:10px;

                    right:20px;

                }

            }

        </style>

HTML

<nav class="navbar">

            <div class="logo">DesignX</div>

            <div class="toggler"><i class="fas fa-bars"></i></div>

            <ul>

              <div class="cut"><i class="fas fa-times"></i></div>  

                <li class="active"><a href="">Home</a></li>

                <li><a href="">About</a></li>

                <li><a href="">Contact</a></li>

                <li><a href="">More</a></li>

            </ul>

            

        </nav>

JS

<script type="text/javascript">

        let responsive = document.querySelector('ul');

        let toggler = document.querySelector('.toggler');

        let cancel = document.querySelector('.cut')

        toggler.addEventListener('click',()=>{

            

            responsive.style.left = 0;

        })

        cancel.addEventListener('click',()=>{

            responsive.style.left ='-100%';

        })

        </script>