JezK

Edit File: _header.scss

.wrap-header {
    position: relative;
}

.site-identity {
    padding-top: 15px;
    padding-bottom: 15px
}
.site-title{
    line-height: 1;
    a{
        line-height: 1;
    }
}
.base-site-header{
    border-bottom: 1px solid var(--border-color);
}
.site-title, .site-description{
    margin:0
}
.wrap-site-navigation {
    align-items: center;
    display: flex;
    position: static;
    justify-content: flex-end;
}

.menu-item {
    list-style: none;
    position: relative;
    width: 100%;
    padding: 0;
    .zoo-icon-down {
        font-size: 65%;
        margin:0
    }
}
.primary-menu {
    text-align: right;
    width: 100%;
    ul {
        margin: 0;
        padding: 0;
    }
    li.menu-item {
        text-align: left;
        .zoo-icon-down {
            display: flex;
            align-items: center;
            width: 25px;
            justify-content: center;
        }
        & > a {
            display: flex;
            justify-content: space-between;
        }
        ul {
            width: 100%;
        }
        &.is-mega-menu {
            position: static;
        }
    }
    & > ul.nav-menu {
        & > li.menu-item {
            display: inline-block;
            margin: 0;
        }
    }
}

.nav-button {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-close-nav {
    margin-right: 15px;
    height: 30px;
}

.zoo-css-icon-menu {
    border-bottom: 2px solid;
    width: 18px;
    display: inline-block;
    margin: 10px 0;
    position: relative;
    transition: all 300ms;
    &:after, &:before {
        content: '';
        border-bottom: 2px solid;
        width: 100%;
        position: absolute;
        left: 0;
        transition: all 300ms;
        transform-origin: center;
    }
    &:before {
        top: -6px
    }
    &:after {
        bottom: -8px;
    }
}

.menu-overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    display: block;
    left: 0;
    top: 0;
    background: var(--black-color);
    opacity: 0;
    visibility: hidden;
    transition: all 500ms;
    z-index: 2;
    cursor: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 18 18' fill='%23fff'%3e%3cpath d='M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z'/%3e%3c/svg%3e"), pointer;
}

/*Mega menu*/
.primary-menu .mega-menu-content {
    padding: 15px 20px;
    z-index: 9;
}

.mega-menu-content {
    .menu-item-mega {
        text-align: left;
        .mega-menu-submenu {
            padding-top: 10px;
        }
    }
    a.hide-text {
        width: 100%;
        padding-top: 5px;
        img {
            float: right;
        }
    }
}

@media(max-width: 1024.98px) {
    .wrap-site-navigation {
        .primary-menu {
            position: fixed;
            top: 0;
            left: 0;
            max-width: 100vw;
            width: 360px;
            background: var(--white-color);
            height: 100vh;
            padding: 10px 0;
            overflow: hidden;
            overflow-x: scroll;
            z-index: 3;
            transform: translateX(-360px);
            transition: all 500ms;
            & > ul {
                height: 100%;
                overflow: hidden;
                overflow-y: scroll;
                padding: 0 15px;
                ul {
                    display: none;
                    padding-left: 15px;
                }
            }
            .zoo-icon-down.active:before {
                content: $icon_up;
            }
        }
    }
    .menu-active {
        .primary-menu {
            transform: translateX(0);
        }
        .menu-overlay {
            opacity: 0.6;
            visibility: visible;
            transition-delay: 100ms;
        }
    }
    .cafe-site-menu{
        .menu-item-mega{
            display: inline-block;
            width: 100%;
            &>a{
                width: 100%;
                position: relative;
                display: block;
            }
            .mega-menu-submenu{
                padding:0;
                .sub-menu{
                    padding:0 0 0 15px;
                    margin:0;
                }
            }
        }
        .mega-menu-content, .mega-menu-submenu{
            display: none;
        }
    }
}

/*End Mega menu*/
@media (min-width: 1024.98px) {
    .mega-menu-content {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        left: 0;
        transition: all 300ms;
        top: calc(100% + 30px);
        background: var(--white-color);
        width: 100%;
        box-shadow: -2px 2px 81px -17px rgba(0, 0, 0, 0.29);
        padding:15px;
        z-index: 3;
        ul {
            z-index: 0;
        }
    }
    .menu-item.is-mega-menu {
        position: static !important;
        &:hover>.mega-menu-content{
            opacity: 1;
            visibility: visible;
            top: 100%
        }
    }
    .mega-menu-submenu>.sub-menu{
        margin:0;
        .menu-item>a{
            padding:8px 0;
        }
    }
    .button-close-nav, .nav-button, .menu-overlay {
        display: none;
    }
    .primary-menu {
        .zoo-icon-down {
            width: auto;
        }
        ul.dropdown-submenu, li.menu-item > .sub-menu {
            box-shadow: -2px 2px 81px -17px rgba(0, 0, 0, 0.29)
        }

ul.dropdown-submenu li.menu-item, li.menu-item > .sub-menu li.menu-item {
            padding: 8px 20px;
            &:first-child {
                padding-top: 15px
            }
            &:last-child {
                padding-bottom: 15px
            }
        }
        li.menu-item {
            width: auto;
            & > ul {
                position: absolute;
                visibility: hidden;
                opacity: 0;
                width: 280px;
                top: 30px;
                transition: all 300ms;
                left: 100%;
                background: var(--white-color);
                z-index: 1;
                text-align: left;
                &.pos-left {
                    right: 100%;
                    left: auto;
                }
            }
            &:hover > ul {
                opacity: 1;
                visibility: visible;
                top: 0;
            }
            li.menu-item {
                width: 100%;
                .zoo-icon-down:before {
                    content: '\c034';
                }
            }
        }
        & > ul.nav-menu {
            text-align: right;
            & > li.menu-item {
                & > ul {
                    left: 0;
                    top: calc(100% + 30px);
                    &.pos-left {
                        left: auto;
                        right: 0;
                    }
                }
                &:hover > ul {
                    top: 100%
                }
            }
        }
    }
}