Responsive Navigation Menu using HTML & CSS Only

byCodingFlicks -September 15, 2020

0

Responsive Navigation Menu using HTML CSS Only

Welcome friends. Today in this project, I will be sharing a snippet based on how to create a Responsive Navbar using only HTML and CSS. Previously shared a snippet on Navbar Animation with Moving Hover CSS Animation. Check that out whether you haven't yet.

Navigation Menu is an essential part of any website design. It helps the viewer to navigate around the website by clicking the nav items. The website designer uses a responsive navbar for the user who visits their website from small devices. It needs to look aesthetic as mobile users are increasing day by day. So we need to take extra care when we make the navbar responsive.

You May also like:

I have used basic markup and styling for creating the desktop version of the CSS navigation bar. To create a toggle effect on-click, I have used an input element and also used a label tag. For Responsive design, I used CSS media queries to make the navbar responsive and also added a smooth CSS transition effect to make it look better for the viewer.

You need to create two files. One is HTML and the other one CSS. You need to add font-awesome CDN as we are using a font-awesome icon for the responsive view. I added that below for your convenience. After creating the files, please copy the code down below and paste to the separate file and save it. Run the project in your browser and modify it according to your need.

REQUIRED FILE

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

HTML

<div class="nav-area">
  <input type="checkbox" id="box">
  <label for="box" class="btn-area"><i class="fa fa-bars"></i></label>
  <label class="logo"><img src="https://i.postimg.cc/BvSwQTb3/logo.png" alt=""></label>
  <ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

CSS

*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: lato;
}
.nav-area{
background: #262626;
height: 62px;
width: 100%;
}
.logo {
line-height: 70px;
padding: 0 40px;
}
.nav-area ul{
float: right;
margin-right: 20px;
}
.nav-area ul li {
display: inline-block;
line-height: 60px;
margin: 0 5px;
}
.nav-area ul li a {
color: #fff;
font-size: 14px;
padding: 22px 15px;
text-transform: uppercase;
font-weight: bold;
}
.nav-area ul li a:hover{
background: darkorange;
transition: .5s;
}
.btn-area{
font-size: 30px;
color: white;
float: right;
line-height: 62px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#box{
display: none;
}
@media (max-width: 860px){
.btn-area{
display: block;
}
.nav-area ul{
position: fixed;
width: 100%;
height: 100vh;
background: darkorange;
top: 62px;
left: -100%;
text-align: center;
transition: all .5s;
}
.nav-area ul li {
display: block;
margin: 0;
line-height: 30px;
padding: 25px 0;
}
.nav-area ul li a{
font-size: 30px;
}
.nav-area ul li:hover{
    background: #000;
}
.nav-area ul li a:hover{
    background: none;
}
#box:checked ~ ul{
left: 0;
}
}

I hope it helps. Thanks for visiting, and please follow our social media profiles to keep yourself updated about future posts.

Please do not enter any spam link in the comment box.