<div id="menu" class="clear relative">
        <div class="background">
            <div id="top-background" class="relative top-block color-1-bg"></div>
            <div id="center-background" class="center-block color-1-bg"></div>
            <div id="bottom-background" class="relative color-1-bg"></div>
        </div>
        
        <div class="column-4">
            <div id="header-contact" class="top-block text-center desktop">
                <i class="fas fa-phone-alt"></i>
                <a href="tel:(123) 456 789" class="color-2">(123) 456 789</a>
            </div>
            
            <div id="header-menu" class="menu center-block middle text-center black">
                <ul>
                    <li><span>HOME</span></li>
                    <li><span>SHOP</span></li>
                    <li><span>ABOUT</span></li>
                    <li><span>BLOG</span></li>
                    <li><span>CONTACT</span></li>
                </ul>
            </div>
        </div>
        
        <div id="header-center" class="column-4">
            <div id="header-logo" class="contain center"><img class="image" src="https:///web.imasmi.com/plugin/WebCss/file/logo.svg"/></div>
            <div id="search-area" class="relative">
                <form id="header-search" class="center relative">
                    <input type="text" class="border-box" name="search" placeholder="Enter keyword">
                    <button class="absolute pointer color-3"><i class="fas fa-search" ></i></button>
                </form>
            </div>
        </div>
        
        <div class="column-4">
            <div id="header-settings" class="top-block text-center">
                <div class="settings-info inline-block">
                    <span class="color-3">Currency:</span>
                    <select class="color-1">
                        <option value="usd">USD</option>
                        <option value="euro">EURO</option>
                    </select>
                </div>
                
                <div class="settings-info inline-block">
                    <span class="color-3">Language:</span>
                    <select class="color-1">
                        <option value="en">EN</option>
                        <option value="fr">FR</option>
                    </select>
                </div>
            </div>
            
            <div id="header-active" class="menu center-block middle text-center black">
                <ul>
                    <li>
                        <div class="header-icon relative">
                           <i class="far fa-heart relative"></i>
                           <div class="icon-count absolute color-2-bg">6</div>
                       </div>
                   </li>
                   <li>
                        <div class="header-icon inline-block"><i class="far fa-user"></i></div>
                       <div class="active-content inline-block">
                           <div class="active-title color-3">Hello, Log in</div>
                           <b>My account</b>
                       </div>
                   </li>
                   <li>
                       <div class="header-icon relative inline-block">
                           <i class="fas fa-shopping-cart"></i>
                           <div class="icon-count absolute color-2-bg">6</div>
                       </div>
                       <div class="active-content inline-block">
                           <div class="active-title color-3">Shopping cart</div>
                           <b>$0.00</b>
                       </div>
                   </li>
                </ul>
            </div>
        </div>
        
        <ul id="mobile-control" class="mobile mobile-tap" onclick="menuOpen()">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>


<div id="credit" class="text-center">
    <div>Created with <a href="https://web.imasmi.com/webcss" target="blank">WebCss</a></div>
    <div>Created with <a href="https://fontawesome.com/" target="blank">Font Awesome</a></div>
</div>

body{font-family: helvetica, sans-serif; background-color: #000000; color: #ffffff;}
a{text-decoration: none;}
.color-1{color: #ffffff;}
.color-1-bg{background-color: #ffffff; color: #000000;}
.color-2{color: #9d8818;}
.color-2-bg{background-color: #9d8818; color: #ffffff;}
.color-3{color: #999999;}
.top-block{height: 30px; padding: 5px 0; box-sizing: border-box;}
.center-block{height: 80px; transition: 0.5s;}
.menu ul{list-style-type: none; margin: 0; padding: 0;}
.menu ul li{display: inline-block; margin: 0 7px; vertical-align: top;}
#header-menu ul li{ font-size: 0.7em;}
.settings-info select{background-color: transparent; border: none;}
.settings-info select option{background-color: #000000; color: #ffffff;}
.header-icon i{font-size: 1.8em;}
.icon-count{top: 0; right: -5px; font-size: 0.7em; padding: 0 3px; }
#header-active .active-content{padding-left: 5px; text-align: left;}
#header-active .active-title{font-size: 0.7em; line-height: 1.4em;}
#header-active b{font-size: 0.9em;}
#header-logo{height: 95px; width: 200px;}
#header-search{width: 70%;}
#header-search input{width: 100%; padding: 6px 30px; display: block; border-top: 1px solid #999999; border-left: none; border-right: none; border-bottom: none; outline: none; text-align: center;}
#header-search:before, #header-search:after{content: ""; position: absolute; height: 30px; width: 1px; background-color: #999999; display: block; }
#header-search:before{left: 15px; transform: rotate(-30deg);}
#header-search:after{right: 15px; top: 0; transform: rotate(30deg); }
#header-search button{top: 5px; right: -30px; background: transparent; border: none; outline: none; font-size: 1.2em;}

#top-background{width: 250px; left: 50%; transform: translateX(-50%);}
#top-background:before, #top-background:after{content: ""; top: 0; border-bottom: 30px solid #ffffff; display: inline-block; position: absolute;}
#top-background:before{border-left: 20px solid transparent; left: -19px;}
#top-background:after{border-right: 20px solid transparent; right: -19px;}
#bottom-background{width: 30%; left: 50%; top: 0; transform: translateX(-50%); height: 20px;}
#bottom-background:before, #bottom-background:after{content: ""; border-top: 20px solid #ffffff; display: inline-block; position: absolute;}
#bottom-background:before{border-left: 10px solid transparent; left: -9px;}
#bottom-background:after{border-right: 10px solid transparent; right: -9px;}

#credit{margin-top: 50px;}
#credit a{color: #29a1b3; text-decoration: none;}
@media (max-width: 1080px){
    #top-background{width: 40%;}
    #bottom-background{width: 60%;}
    #header-logo{height: 30px; width: 35%; padding-top: 5px;}
    .settings-info{position: fixed; left: 15px; top: 10px;}
    .settings-info:nth-child(2){left: unset; right: 15px;}
    .settings-info select{ font-size: 0.7em;}
    .settings-info span{display: none;}
    #header-settings{position: absolute; height: auto;}
    #search-area{position: absolute; top: 100px; left: 50%; margin-left: -27%; width: 54%; transition: 0.5s;}
    #header-search{width: 80%;}
    #header-active{text-align: left; padding-left: 5px; height: 75px; font-size: 0.8em;}
    #header-menu{position: absolute; left: 0; top: 120px; width: 100%; display: block; text-align: center; visibility: hidden; height: 290px; overflow-y: auto;}
    #header-menu ul li{display: block; font-size: 1.6em; overflow: hidden; margin: 10px 0;}
    #header-menu ul li span{top: -1.2em; position: relative; transition: 0.3s; }
    .active #header-menu ul li span{top: 0; transition-delay: 0.3s;}
    
    #mobile-control{list-style-type: none; top: 30px; right: 20px; width: 50px; cursor: pointer; z-index: 2; position: fixed; padding: 0;}
    #mobile-control li{width: 100%; height: 2px; margin: 7px 0; background-color: #000000; transition: 0.3s;}
    .active #mobile-control li:first-child, #mobile-control.active:hover li:first-child{transform: rotate(45deg) translate(20px, 2px);}
    .active #mobile-control li:nth-child(2), #mobile-control.active:hover li:nth-child(2){width: 0; transition: 0s;}
    .active #mobile-control li:last-child, #mobile-control.active:hover li:last-child{transform: rotate(-45deg) translate(10px, 7px);}
    .active .center-block{height: 400px;}
    .active #search-area{top: 415px;}
    .active #header-menu{visibility: visible;}
}

    function menuOpen(){
        var menu = document.getElementById("menu");
        if(menu.classList.contains("active")){
            menu.classList.remove("active");
            document.body.style.overflow = "initial";
        } else {
            menu.classList.add("active");
            document.body.style.overflow = "hidden";
        }
    }