/*
 * Menu en header van de webshop, geladen na assets/all/all.min.css.
 *
 * De header stond vast (position: fixed) op 124px, met 124px padding op de body. Met twee
 * menurijen is de header hoger, waardoor de bovenkant van elke pagina onder het menu viel.
 * Sticky laat de header meegroeien met zijn inhoud.
 */
#header {
    position: sticky;
    top: 0;
    height: auto;
}

body {
    padding-top: 0;
}

@media (min-width: 768px) {
    /* Hoofdmenu: rijen gecentreerd i.p.v. links uitgelijnd */
    #header #janelca-nav .navbar-nav {
        float: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #header #janelca-nav .navbar-nav > li {
        float: none;
    }

    /* Submenu's openen bij hover, in dezelfde stijl als het hoofdmenu */
    #header #janelca-nav .navbar-nav > li:hover > .dropdown-menu {
        display: block;
    }

    #header #janelca-nav .dropdown-menu {
        margin-top: 0;
        padding: 6px 0;
        min-width: 220px;
        border: 0;
        border-top: 2px solid #eaaa43;
        border-radius: 0;
        box-shadow: 0 6px 12px rgba(0, 0, 0, .1);
    }

    #header #janelca-nav .dropdown-menu > li > a {
        padding: 9px 18px;
        font-size: 13px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #878787;
    }

    #header #janelca-nav .dropdown-menu > li > a:hover,
    #header #janelca-nav .dropdown-menu > li > a:focus {
        color: #eaaa43;
        background: #f8f8f8;
    }
}