the web became fat.

let's put it on a diet.

get rid of those burgers.

Meet Paradeiser.

The best mobile navigation on this planet.
1.3kb of pure joy. CSS Only.

download github

or just go with the flow
bower install Paradeiser

Share the love!

The Hamburgermenu has proven to be bad.

Not only is the icon still not widely recognized and therfore a major usability flaw, it also hides all the links on the website for 3 damn lines.

With Paradeiser you are forced to display 3-5 of your major links directly to the user, making it more appealing to click one of them for further information.

Examples of Paradeiser in usage:

Small and Easy to use

With only 1.3kb gzipped in a single request Paradeiser is one of the easiest to implement navigations.

CSS only. No JS required.

Forget handling with jQuery or Javascript. Paradeiser is CSS only. SCSS is available for customizations as well.

Overflow Menu

Yes, there is still a hamburger-like navigation implemented as well. You might want to put less important links like Terms and Conditions there. But since it resides next to other nav links the recognition is greatly improved.

Mobile and/or Desktop

Paradeiser is designed to be used on Mobile Screens as well as Desktops. To further improve your navigation hiding classes are here to use: Hide certain links on mobile and put them into the overflow and vice versa.

Automatic hiding of the navbar using Headroom.js

Although Paradeiser itself is usable without any JS at all, Headroom.js enhances its experience a lot by providing automatic hiding on scrolling, as you can see on this page. The implementation is fairly simple, be sure to check out the demo (Source Code) for an in-depth demo on this topic. Demo without Overflow (Source Code)


first load up the style into your html header (hosted by cdnjs)

<link rel="stylesheet" href="">

Or if you downloaded the css onto your own server

<link rel="stylesheet" href="paradeiser.min.css">

then paste in the menu itself

<nav class="paradeiser">
    <a href="#">
        <img src="logo.png" alt="Logo" class="paradeiser_logo">
    <a href="#">
        <div class="paradeiser_icon_canvas">
            <img src="img/menu_home.svg" alt="Navigate to Home">
    <a href="#">
        <div class="paradeiser_icon_canvas">
            <img src="img/menu_shop.svg" alt="Navigate to Shop">

    <!-- paste in as many links as you want -->

    <!-- and include the dropdown aswell -->
    <div class="paradeiser_dropdown">
        <a href="#paradeiser-more" id="paradeiser-dropdown">
            <div class="paradeiser_icon_canvas">
                <img src="img/menu_overflow.svg" alt="">
        <ul class="paradeiser_children" id="paradeiser-more">
            <li><a href="#">Terms of Service</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Yolo</a></li>
            <li class="paradeiser-hidden-desktop"><a href="#">Hidden on desktop</a></li>
            <li class="paradeiser-hidden-tablet"><a href="#">Hidden on tablet</a></li>
            <li class="paradeiser-hidden-phone"><a href="#">Hidden on phone</a></li>
            <li id="greybox"><a href="#!"></a></li>

Optional: Turn on automatic hiding of the navbar using Headroom.js

    <script src="//"></script>

And then

    // enabling to open the overflow menu as the pure css link
    // would toggle a scroll and therefore hide the menu
    document.getElementById("paradeiser-dropdown").addEventListener("click", function(event){
        // stopping the scroll
        // toggling the class

    // hide the menu on click onto greybox
    document.getElementById("greybox").addEventListener("click", function(event){
        // stopping the scroll
        // toggling the class

    // enabling headroom
    var myElement = document.querySelector(".paradeiser");
    var headroom  = new Headroom(myElement, {
        tolerance : 5,
        onUnpin : function() {

Made with ❤ by Daniel Winter