HTML CSS collapsing navigation bar
So we want to make simple responsive navigation bar for desktop and mobile. If you don't want to make any fancy menu icon or something like that, then solution is simple, choose what screen sizes will navigation bar collapse, and use CSS display variable.
Basically if you want for desktop screen size horizontal navigation bar, then your CSS should look like:
nav ul li { display:inline; }
For responsive and mobile devices:
nav ul li { display:block; }
How to detect then desktop and mobile devices?, well you can do this way:
First desktop css , following detecting of mobile devices and css for those devices.
nav ul li { display:inline; }
@media only screen and (max-width : 680px) {
nav ul li { display:block; }
}
All screen sizes larger than 680px will then show horizontal navigation bar and smaller will have then vertical. Simple as that. Here is simple example code:
