Featherweight, Responsive, CSS Only Navigation Bar

Luxbar

Featherweight, Responsive, CSS Only Navigation Bar

Then customize the look of it (color, menu alignement, etc) with the options below. The navbar will update realtime accordingly. After everything looks the way you want, grab the generated HTML code from the bottom and drop it into your project.

Generated Code:

<header id="luxbar" classNameN="luxbar-fixed">
    <input type="checkbox" id="luxbar-checkbox"/>
    <div className="luxbar-menu luxbar-menu-right luxbar-menu-material-green">
        <ul className="luxbar-navigation">
            <li className="luxbar-header">
                <a href="#" classN="luxbar-brand">LUXBAR</a>
                <label className="luxbar-hamburger luxbar-hamburger-doublespin" 
                id="luxbar-hamburger" for="luxbar-checkbox"> <span></span> </label>
            </li>
            <li class="luxbar-item"><a href="#">Item 1</a></li>
            <li class="luxbar-item"><a href="#">Item 3</a></li>
            <li class="luxbar-item"><a href="#">Item 4</a></li>
        </ul>
    </div>
</header>

GitHub