Examples

Navigation bar

A main navigation, converted so it collapses to a hamburger on mobile — brand stays, links fold into a toggle-revealed drawer. Pure CSS, zero JavaScript. This is the exact pattern the engine emits.

Live demo

Resize your window narrow, or view on a phone — the links collapse behind the icon. (The demo below is forced to mobile so you can try the toggle here.)



Features
Docs
Pricing
Login

The output

This is the real markup + CSS ready→made emits. Desktop is untouched (the burger is hidden, so it stays pixel-identical); below 820px the brand keeps its place and everything else collapses behind the toggle.

<nav class="nav">
  <input class="dtc-navtoggle" type="checkbox" id="dtc-nt" aria-label="Menu">
  <label class="dtc-burger" for="dtc-nt" aria-hidden="true"><span></span><span></span><span></span></label>
  <a class="logo" href="#">wpconverters</a>
  <a href="#">Features</a><a href="#">Docs</a><a href="#">Pricing</a><a href="#">Login</a>
</nav>

.dtc-burger{display:none;flex-direction:column;gap:5px;width:38px;height:38px;padding:8px;cursor:pointer}
.dtc-burger span{display:block;width:100%;height:2px;background:currentColor;border-radius:2px}
@media (max-width:820px){
  .nav{display:flex;flex-wrap:wrap;align-items:center}
  .nav > .logo{margin-right:auto}
  .nav > .dtc-burger{display:flex}
  .nav > *:not(.logo):not(.dtc-burger):not(.dtc-navtoggle){display:none}
  .nav > .dtc-navtoggle:checked ~ *:not(.logo):not(.dtc-burger):not(.dtc-navtoggle){
    display:flex;flex-basis:100%;width:100%}
}

See it in context on the Features → navigation section.

menu