3 Pure CSS4 with JSPublished 2026-10-05Free · no sign-up
Seven ways a navbar can adapt to small screens: a hamburger toggle, a priority plus bar that moves overflow links into a More menu, a scrolling row of links, a full-screen overlay, a logo above wrapping links, a menu built on details with no script and a slide-in drawer.
Links sit in a row on wide containers and collapse behind a Menu button on narrow ones, opening as a vertical list below the bar. The breakpoint is a container query, so the navbar responds to the space it is given, not the window.
var b = document.querySelector('.rn1 .mb'), l = document.getElementById('rn1l');
b.onclick = function () { var o = l.classList.toggle('open'); b.setAttribute('aria-expanded', o); };
02. Priority Plus: Overflow into More
ResponsivePriority plus
Links that fit stay visible and the rest move into a More menu, so the most important links never disappear behind a hamburger. A ResizeObserver measures the bar and moves list items between the two lists in source order.
var nav = document.querySelector('.rn2 nav'), vis = nav.querySelector('.vis'), more = nav.querySelector('.more'), mb = more.querySelector('button'), list = document.getElementById('rn2m');
function fit() {
while (list.firstElementChild) vis.appendChild(list.firstElementChild);
more.hidden = true;
if (vis.scrollWidth <= vis.clientWidth) return;
more.hidden = false;
while (vis.scrollWidth > vis.clientWidth && vis.lastElementChild) list.insertBefore(vis.lastElementChild, list.firstChild);
}
mb.onclick = function () { var o = mb.getAttribute('aria-expanded') !== 'true'; mb.setAttribute('aria-expanded', o); list.hidden = !o; };
new ResizeObserver(fit).observe(nav);
03. Scrollable Link Row with Fades
ResponsiveScroll
On narrow screens the links stay in one row that scrolls sideways, with faded edges hinting that there is more, the pattern news and shop sites use for categories. The fade is a mask on the list, and the row is a labelled navigation landmark.
The menu button opens a full-screen overlay with large links, built on a modal dialog so focus is trapped inside it, the page behind is inert and Escape closes it. The overlay fades in with @starting-style.
var d = document.querySelector('.rn4 dialog');
document.querySelector('.rn4 .open').onclick = function () { d.showModal(); };
d.querySelector('.close').onclick = function () { d.close(); };
d.querySelectorAll('nav a').forEach(function (a) { a.onclick = function () { d.close(); }; });
05. Logo Above Links on Mobile
ResponsiveCentred
Some sites have few enough links that no hamburger is needed: on narrow containers the logo sits centred above a wrapping row of links, on wide ones it moves to the left. Every link stays visible at every size, which is the most usable option of all.
View code
<div class="rn5"><nav aria-label="Main"><a class="logo" href="#home">Olive & Oak</a><ul><li><a href="#menu">Menu</a></li><li><a href="#book">Book</a></li><li><a href="#visit">Visit</a></li></ul></nav></div>
A collapsible menu that needs no script at all: the menu is a details element whose summary is the Menu button, and on wide containers a container query hides the summary and shows the links as a row. It works even before JavaScript loads.
The menu slides in from the left as a modal drawer over a dimmed page. The native dialog element handles focus trapping and Escape, the slide is a transform transition with @starting-style, and clicking the dimmed backdrop closes it.
var d = document.querySelector('.rn7 dialog');
document.querySelector('.rn7 .open').onclick = function () { d.showModal(); };
d.querySelector('.close').onclick = function () { d.close(); };
d.addEventListener('click', function (e) { if (e.target === d) d.close(); });
About these CSS Responsive Navbars
Hide as little as possible
If the links fit, show them. A centred logo above a wrapping row, or a scrolling row with faded edges, keeps navigation visible; priority plus hides only what does not fit.
Menus are buttons
A menu toggle is a real <button> with aria-expanded and aria-controls, and a visible word such as Menu next to any icon helps people recognise it.
Overlays and drawers are dialogs
Full-screen menus and drawers cover the page, so build them on <dialog> with showModal(): focus is trapped, the page behind is inert and Escape closes them.
Respond to the container
A navbar inside a narrow layout region should collapse even on a wide screen. Container queries let the same component collapse wherever it is placed.
Frequently asked questions
Is the hamburger icon understood?
Mostly, but adding the word Menu beside it measurably helps.
Does the details menu work without JavaScript?
Yes. It opens and closes with no script at all.
How does priority plus decide what to hide?
It measures the bar and moves the last links into the More menu until the rest fit.