Sometimes, we want to build a unique navigation system while designing a template of a website. Although, there a number of menu & nav available on the web. But in the case of lightweight projects, we have to use some pure CSS assets in our template. If you are also looking for a lightweight responsive meu, then you are in the right place. Here, I’m going to share a responsive hamburger menu created with only CSS.
Basically, it’s a horizontal navigation menu bar that converts into a hamburger menu on mobile devices (small screen). Besides this, there is also a space for a brand logo in this menu bar. The most important thing that makes this menu attractive is the animated hamburger icon. Before going further, I’ll recommend you to check the live version of this hamburger menu by visiting the demo page.
OK! let’s begin with HTML coding to build a hamburger menu without wasting time.
HTML Structure for Responsive Hamburger Menu
As we mentioned above, the menu consists of three main parts, a site logo, navigation links and an animated hamburger icon (that will display on a mobile screen). So, we’ll create the HTML header element, place a logo, ul
(List of links), radio input for hamburger working and put all these elements inside a div
container "menu-wrapper"
.
<div class="menu-wrapper"> <header class="header"> <a href="#home" class="logo">Codeconvey</a> <input class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> <ul class="menu"> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#careers">Careers</a></li> <li><a href="#contact">Blog</a></li> <li><a href="#contact">News</a></li> </ul> </header> </div>
You can also add your logo image inside <a href="#home" class="logo">
instead of text.
The CSS Styles
First of all, define basic styles for the header (menubar). If you want to customize its color, pass the custom value for the background-color
attribute.
.header { background-color: #414141; box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); position: relative; width: 100%; z-index: 3; } .header ul { margin: 0; padding: 0; list-style: none; overflow: hidden; }
Now we’ll define styles for navigation links, here the important property is the display and the padding property. You can change its color (color: #414141
) according to your needs.
.header li a { display: block; color: #414141; padding: 20px 20px; text-decoration: none; } .header li a:hover, .header .menu-btn:hover { background-color: rgba(0, 0, 0, 0.10); }
Add some styles for the site logo. If you want to add your logo in image format, then define the styles for image using .header .logo img{width: 120px}
, etc.
.header .logo { color: #fff; display: block; float: left; font-size: 1.5em; padding: 12px 20px; text-decoration: none; }
The following CSS generates the animated hamburger menu icon. If you want to change its color, update the value of the background (background: #fff;
). Similarly, you can change its size by updating the width property (that is 18px;
).
.header .menu { clear: both; max-height: 0; transition: max-height .2s ease-out; } /* menu icon */ .header .menu-icon { cursor: pointer; display: inline-block; float: right; padding: 28px 20px; position: relative; user-select: none; } .header .menu-icon .navicon { background: #fff; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; } .header .menu-icon .navicon:before, .header .menu-icon .navicon:after { background: #fff; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } .header .menu-icon .navicon:before { top: 5px; } .header .menu-icon .navicon:after { top: -5px; } /* menu btn */ .header .menu-btn { display: none; } .header .menu-btn:checked ~ .menu { max-height: 340px; } .header .menu-btn:checked ~ .menu-icon .navicon { background: transparent; } .header .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); } .header .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); } .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0; }
Finally, add the following CSS into your project to make the hamburger menu fully responsive.
/* Responsive */ @media only screen and (max-width: 768px){ .header ul{ background-color: #fff; } .header li a { padding: 15px; border-bottom: 1px dotted #ddd; } } @media only screen and (min-width: 768px) { .menu-wrapper{ background: #414141; height: 55px; line-height: 55px; width: 100%; } .header li { float: left; } .header .logo{ line-height: 1; } .header li a { color: #fff; padding: 0px 30px; border-right: 1px solid rgba(255, 255, 255, 0.2); } .header .menu { clear: none; float: right; max-height: none; } .header .menu-icon { display: none; } }
That’s all! I hope you find this tutorial helpful. If you have any questions or suggestions related to the hamburger menu, let us know by comment below.
I thank you very much for sharing the code for the responsive menu using css only. Keep creating and innovating in the field of web development and spreading it for everyone.
Hi Semadha!
Thanks for your feedback! Keep visiting us for more free web design code and scripts.
Thank you for your work sir, One question I want to make a one page website, how could I make the hamburger menu list close after i click one item? because it seems it cannot close after you select an item. Thank you very much sir
Hello Mike!
You’re welcome. Yes it’s a good choice to implement this navigation in your one-page website project.
If you want to close the menu on link click, you need a little JavaScript function as it’s hard to achieve this requirement using pure CSS. So, add the following function into your project:
This cannot be accessed by keyboard users sadly.
Great work! A very simple & clear tutorial.
This is NOT “CSS only”! Requires HTML to create. I wish you and all the others would stop saying “CSS only” it is truly misleading!
Hi Eric!
The term “CSS only” is used when we talk about functionality. Basically, HTML is essential while making any element. So, we need JavaScript to functionalize the components. Therefore, the term “CSS only” or “pure CSS” means to make the elements workable without using JS functions.