Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Horizontal CSS Menus: Here

Responsive Iconic Menu

Author: Dynamic Drive

This sleek horizontal menu bar stays tucked away until the user clicks on an icon, revealing the menu. Using CSS3, various parts of the menu are animated, from the menu unveil to the icon flip when clicked on. Pizzazz aside, at its core this is a menu that's highly responsive to various devices and screen sizes. The menu intelligently switches between the standard menu bar, a slightly truncated menu, to a drop down menu based on the user's available screen real estate. It's a beautiful thing when style and function come together!

Demo (Click on icon below to reveal menu:):

To better see the responsive nature of the menu in action, click here and try resizing your browser window.

The CSS:


Near the end of the style sheet is where you'll find the CSS media query portion of the code that dictate the responsive settings of the menu:

@media screen and (max-width: 580px) { /* Hide toggle icon when menu is already open (increases usable menu space by 40px) */
.iconicmenu input[type="checkbox"]:checked ~ label {
display: none;
.iconicmenu input[type="checkbox"]:checked ~ ul {
margin-left: 0;

@media screen and (max-width: 560px) { /* Convert horizontal menu to vertical drop down instead (friendly across all screen sizes) */
.iconicmenu {
overflow: visible;
.iconicmenu ul {
height: auto;
.iconicmenu ul li {
min-width: 200px;;
display: block;
.iconicmenu ul li a {
float: none;;
text-align: left;

By default two break points are defined- one when the user's viewable screen size is 580px or less, and the other, 560px. Depending on your menu's width and at what screen width the menu starts to get truncated, you'll want to edit the above two values accordingly.

Code Info

Rate this code:

Date Posted: 02/04/2015

Revision History: Jan 25' 16': Updated code to fix menu in Chrome iOS.

Usage Terms: Click here

Copyright 2006-2016 Dynamic Drive