<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>

    <nav>
        <div class="toggle">
            <i class="fas fa-bars but"></i>
        </div>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">PORTFOLIO</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $(".but").click(function () {
                $("ul").toggleClass("active");
            })
        })
    </script>
</body>
</html>
body{
    margin:0;
    padding:0;
    font-family:sans-serif
}
nav {
    width: 100%;
    background: #00316b;
}
ul{
    width:80%;
    margin:0 auto;
    padding:0;
}
ul li{
    list-style:none;
    display:inline-block;
    padding:20px;
}
ul li:hover{
    background:#e91e63;
}
ul li a{
    color:#fff;
    text-decoration:none;
}
.toggle{
    width:100%;
    padding:10px 20px;
    background:#001f44;
    text-align:right;
    box-sizing:border-box;
    color:#fff;
    font-size:30px;
    display:none;
}
@media(max-width:768px){
    .toggle{
        display:block;
    }
    ul {
        width: 100%;
        display:none;
    }

    ul li {
       display: block;
       text-align: center;
     }
    .active{
        display:block;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.