November 27, 2013 9:26 am

How to create Responsive Header Menu with CSS

Now days responsive themes are very important for web development because many users use only mobile to check websites and I am also working on new theme of PHPGang on responsive rules and created a smart and responsive header with CSS media option.


In this article I will show you how to make CSS and HTML to display header on diffrent devices.

Article contain a demo and complete source code to download only for subscribed users.

This responsive header designed with only css no need of any jQuery and script to get device width etc.


Contains css for menu:

This CSS has one /*MEDIA QUERY*/ which check device width and put css respectively.

If device size become less than 640px it will shrink menu items and show them in a drop-down you can check it by zoom in and zoom out your browser window with “ctrl”+”+” or “ctrl”+”-“.


Contains design of menu with header and nav menu:

We love your feedback and suggestions.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories:
  • Mark

    Here’s a question… is it possible, once open, to make the menu close on a mobile device given the inability to hover off of the “menu-icon”? I’ve been racking my brain trying to find a solution.

  • You have describe responsive designs in such a nice way or in a kind of series..

    I like .