HTML CSS

RESPONSIVE STICKY MENU WITH PURE CSS

(a quick guide)

<nav id="sticky-menu">  <a href="#">ONE</a>   <a href="#">TWO</a>   <a href="#">THREE</a> </nav>

NAV MENU HTML

01

#sticky-menu {   STICK TO TOP ON SCROLL   position: sticky; top: 0; left: 0;     FLEX LAYOUT, FULL WIDTH   display: flex; width: 100%;  }

NAV MENU CSS

02

AUTO WIDTH MENU ITEMS #sticky-menu a { width: 100%; }

BIG FONT & BUTTONS ON SMALL SCREEN @media all and (max-width: 768px) {      #sticky-menu a   { font-size:  1.2em; padding: 10px; } }