Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

Admin Dashboard responsive menu layout

Difficulty Level

Today we are going to take a look at how to create a responsive side navigation menu layout using media queries, positioning and pseudo elements.

Many believe that this can be done using flexbox but the truth is that first of all flexbox is not fully supported in all the browsers and have different behaviors and also with flexbox you can’t set the header to be a fixed height and expect the layout to rearrange accordingly.

HTML markup

Markup is pretty simple. a .header that contains a .nav-trigger for triggering the menu in the mobile, a .side-nav that contains our main side navigation and then the .main-content holding our main content. We have used font-awesome for the icons in the menu. Let’s take a look at the markup.

Very simple! Each li contains an a which contains 2 spans for the icon and the label.

Styling it

Both .header and .sub-nav are absolute positioned. we use z-index to make header show on top of navigation and we give a padding-top to sub-nav to push the navigation below the header. We make sure that the .side-nav‘s display is set to none because we don’t want to see it in the mobile. using media queries we set it back to block.

The actual navigation items are styled as follow. Nothing special.

Now we use the power of media queries to adjust the look of the side navigation first in tablet view and then for the desktop.

As you can see we use :nth-child(2) to hide the labels when seen in tablet and then show them back again when seen in the desktop.


We use jquery to toggle the following class when the .nav-trigger is clicked.

Checkout the demo and download the code to try it yourself.