How to create a responsive navigation menu? [Normal VS Responsive navigation]

Responsive design,trend,style or whatever you name it.Responsive design is popular among us because it provides us flexibility for different screen sizes.In this post I'm going to use same markup for two different navigations but the different CSS for each of them.One will be normal navigation that is for wide screens.Second we have a responsive screens size.Lets have a look at demo:

See the Pen Responsive VS Normal navigation by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

The above navigations shows the same markup but different style.If you have observed,there are sites with responsive design uses different ways to create navigations,but I like this one because no need to refresh or to switch to different page its ready on click.

The purpose of using same markup is to demonstrate that how you will change the normal navigation into responsive one small screens sizes.However,classes are different but in the page you will be using one class and set the CSS for different screens.Check this out.

Thirdly,Jquery is been added to slide Up or Down on click on button.The button have navicon (three line navigation icon),it is added using font.I fount that many mobile browsers were not recognizing the font and were not showing the navicon.But there are several more methods like to use an image.