All of these responsive menus will auto switch between regular site navigation and mobile-friendly navigation depending on the viewport size.
I hope you like it and don’t forget to spread the world.
Originally Published Nov 17 2017, updated Feb 14 2021
Table Of Contents:
Pure CSS Responsive Menus:
A pure CSS responsive menu which automatically collapses the regular drop-down navbar into a mobile-friendly sliding menu with or without the toggle button.
A pure CSS responsive menu created by andornagy that automatically changes to a toggleable dropdown menu at a specified breakpoint based on CSS3 media queries.
Yet another responsive, mobile-friendly hamburger navigation menu for your cross-platform web pages. Implemented with pure HTML and CSS/CSS3.
A pure CSS mobile-friendly navigation that automatically transform your horizontal navigation into a toggleable vertical accordion menu on smaller screen devices, with support for unlimited sub menu items.
A fully responsive, CSS-only navigation that breaks down into a hamburger dropdown menu when the viewport size is smaller than a breakpoint specified in the CSS3 media queries.
A smart responsive sticky navbar that automatically slides down and hides as you scroll down or up the webpage.
The Collapsible library automatically collapsible the nav items into a dropdown menu with a hamburger toggle button, when there’s not enough screen space.
A mobile-friendly responsive navigation system that uses CSS3 media queries to detect the screen size and transforms the regular horizontal navigation into a show / hide menu with a toggle button on small screens.
To download more responsive menus for your modern website & web app, here are a few more resources available online: