<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <title>Responsive Navigation Bar</title>
 </head>
<body>
    <header>
        <figure class="brand">LOGO</figure>
        <nav class="menu">
            <input type="checkbox" id="menuToggle">
            <label for="menuToggle" class="menu-icon"><i class="fa fa-bars"></i></label>
            <ul>
                <a href="#"><li>Home</li></a>
                <a href="#"><li>Likenull</li></a>
                <a href="#"><li>About Us</li></a>
                <a href="#"><li>Contact Us</li></a>
                <a href="#"><li>Terms</li></a>
            </ul>
        </nav>
    </header>
  <center>
  <h1> Resize me to toogle responsive bar.</h1>
  </center>
  </body>
</html>

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
header {
    width: 100%;
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-family: sans-serif;
    background-color: #e065e6;
}
.brand {
    font-size: 1.4rem;
    color: #fff;
    width: auto;
    height: 100%;
    float: left;
    margin: 0 0 0 5%;
    cursor: pointer;
}

.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none;
}
.menu {
    color: #fff;
    cursor: pointer;
    width: 60%;
    height: 100%;
    float: right;
}
.menu ul {
    width: 100%;
    height: inherit;
    margin: 0;
    padding: 0;
    display: -webkit-box;     
    display: -moz-box;         
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.menu ul a {
    width: 20%;
    height: inherit;
    color: #fff;
    display: inline-block;
}
.menu ul a:hover {
    background-color: #e085e6;
    color: #fff;
}
#menuToggle {
    display: none;
}
.menu-icon {
    display: none;
}
@media screen and (max-width: 768px) {
    .menu {
        width: 100%;
        height: auto;
    }
    .menu ul {
        display: block;
        max-height: 0;
    	overflow: hidden;
    	-webkit-transition: max-height 0.3s;
    	-moz-transition: max-height 0.3s;
        -ms-transition: max-height 0.3s;
        -o-transition: max-height 0.3s;
    	transition: max-height 0.3s;
    }
    .menu ul a {
        text-align: left;
        width: 100%;
        height: 50px;
        background-color: #e065e6;
        padding: 1px 0px 20px 5%;
    }
    .menu-icon {
        cursor: pointer;
        width: 70px;
        height: inherit;
        display: block;
        position: absolute;
        top: 0.3%;
        right: 0;
    }
    #menuToggle:checked ~ ul {
        max-height: 350px;
    }
    .menu-icon i {
        font-size: 1.7rem;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.