Hello folks,

Here is an example of responsive navigation without javascript using pure css.

HTML:-

<nav>
    <a href="#" class="logoNAv">Logo </a>
    <input type="checkbox" id="nav" /><label for="nav"></label>
    <ul>
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a>
            <ul>
                <li><a href="#">Sub menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Menu item 3</a>
        </li>
        <li>
            <a href="#">Menu item 4</a>
        </li>
        <li>
            <a href="#">Menu item 5</a>
        </li>
    </ul>
</nav>

CSS:-

* {box-sizing: border-box;margin: 0;padding: 0;}
.logoNAv {color: #fff !important;;display: inline-block;font-size: 18px;font-weight: 800;padding: 7px 0 0 13px;text-decoration: none;}
nav{position: relative;background: #0b82c0;min-height: 40px;}
nav > ul {float: right;padding:0;margin:0;}
nav > ul > li {text-align: center;line-height: 40px;padding: 0 10px;}
nav > ul li ul li {width: 100%;text-align: left;}
nav ul li:hover {cursor: pointer;position: relative;}
nav ul li:hover > ul {display: block;}
nav ul li:hover > a {color: #fff;}
nav > ul > li > a {cursor: pointer;display: block;outline: none;width: 100%;text-decoration: none;color:#fff !important;}
nav > ul > li {float: left;list-style: none;}
nav a {color: white;}
nav > ul li ul {display: none;position: absolute;left: 0;top: 100%;width: 170px;z-index: 2000;background: #4b98c0;padding: 0;}
nav ul li ul li{list-style: none;padding-left: 20px;}
nav ul li:hover{background: #3387b3;}
nav > ul li ul li > a {text-decoration: none;}
[type="checkbox"], label {display: none;}
@media screen and (max-width: 768px) {
nav ul{display: none;}
label {    display: block; background: #4b98c0;width: 40px;    height: 40px;   cursor: pointer;position: absolute;right: 00px; top: 0px;} 
label:after{content:'';display: block;width: 30px;height: 5px;background: #fff;margin: 7px 5px;box-shadow: 0px 10px 0px #fff, 0px 20px 0px #fff}
[type="checkbox"]:checked ~ ul {    z-index: 9999;  position: absolute;right: 0px;left: 0px;top:40px;display: block;}
nav a {color: #fff;}
nav ul li {display: block;    float: none;    width: 100%;    text-align: left;   background: #4b98c0;text-indent: 20px;}
nav > ul > li {    margin-left: 0px;   padding: 0;}
nav > ul li ul li {    display: block;float: none;}
nav > ul li ul {display: block;    position: relative; width: 100%;z-index: 9999;float: none;}}

Output- Below is the output generated by using above code