How to create a responsive navigation bar in 2019 with media queries. yes In this tutorial we are going to learn media queries and basic javascript toggling, building a burger menu and more!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<title>Responsive Navbar Tutorial</title>
</head>
<body>
<nav>
<div class="hamburg">
<i class="fas fa-bars"></i>
</div>
<ul class="nav-links">
<li class="link"><a href="#"> Home</a></li>
<li class="link"><a href="#">About</a></li>
<li class="link"><a href="#">Servies</a></li>
<li class="link"><a href="#">Works</a></li>
<li class="link"><a href="#">Contact</a></li>
</ul>
</nav>
<script src="app.js"></script>
</body>
</html>CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
background: #bdc3c7;
}
nav{
background-color: #2980b9;
height: 10vh;
padding: 0 20px;
position: relative;
}
.nav-links{
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
height: 100%;
width: 100%;
}
.nav-links li a {
color: #ffffff;
text-decoration: none;
margin-right: 10px;
}
.hamburg .fas{
position: absolute;
top: 24%;
left: 94%;
color:#ffffff;
font-size: 1.5em;
cursor: pointer;
display: none;
}
.nav-links .link{
width: 100%;
height: 100%;
text-align: center;
padding-top: 20px;
}
/* //mobile menu section */
@media screen and (max-width :768px){
.nav-links{
flex-direction: column;
position: fixed;
top: 60px;
left: 0;
background: #2c3e50;
height: 250px;
width: 100%;
display: none;
}
.nav-links .link:hover{
background: #34495e;
}
.hamburg .fas{
display: block;
}
}
JAVASCRIPT
// select the icon hamburg and link
const icon = document.querySelector('.hamburg');
const link = document.querySelector('.nav-links');
// Added click event listener to icon hamburg
icon.addEventListener('click', ()=>{
if(link.style.display == 'flex' || link.style.display == '')
link.style.display = 'none';
else link.style.display = 'flex'
})(Visited 1,737 times, 1 visits today)
