LumoCSS logoLumoCSS logo
Content

Header

The main header element for the page. Add class="sticky" when the header should stay visible while scrolling.

Default

<header class="sticky">
        <div class="container">
            <a href="index.html"><img src="/LumoCSS.svg" alt="Lumo.CSS logo" height="65" id="page-logo">
            </a>
            <nav aria-label="Main navigation">
                <button type="button" role="menu" aria-label="Open navigation" aria-controls="main-navigation" aria-expanded="false"></button>
                <ul id="main-navigation">
                    <button type="button" aria-label="close"></button>
                    <li><a href="/page1">Page 1</a></li>
                    <li><a href="/page2">Page 2</a></li>
                    <li><a href="/page3">Page 3</a></li>
                </ul>
            </nav>
        </div>
    </header>

Header can have a glass backdrop effect with class="glass".