<style>{
padding:0px;
margin:0px;
font-family:monospace;
box-sizing:border-box;
}
.container{
background-color:blue;
display:grid;
grid-template-columns:auto auto;
height:100px;
padding:0px 25px;
}
img{
display:block;
width:100px;
float:left;
}
.links{
text-align:right;
background-color:blue;
}
.links a{
text-decoration:none;
font-size:20px;
color:white;
padding:0px 10px;
line-height:100px;
}
.fa{
color:white;
font-size:26px;
display:none;
float:right;
padding:0px 15px 0px 0px;
line-height:100px;
cursor:pointer;
}
only screen and
(max-width:600px){
.container{
padding:0px;
grid-template-columns:auto;
}
.links a{
display:block;
text-align:left;
line-height:40px;
padding:10px;
}
.fa{
display:block;
}
.links{
display:none;
}
.my linksshow{
display:block;
}
}
</style>
<div class="container">
<div class="logo">
<a href="#"><img src="logo.png">
</a>
<span class="fa fa-bars">
</span>
</div>
<div class="links">
<a href="#">Home</a>
<a href="#">Profile</a>
<a href="#">Group</a>
<a href="#">Contact</a>
<a href="#">Forget</a>
<a href="#">about</a>
</div>
</div>
<script>
document.getElementsByClassName("fa")[0].addEventListener("click",function(){
document.getElementsByClassName("links")[0].classlist.toggle("mylinksshow");
});
</script>