WEB by ImaSmi

HTML


<div id="header">
    <section class="color-2-bg">
        <div class="top-header frame clear">
            <div class="paddingX-20">
                <span class="company-info">
                    <span class="white"><span class="Text">Monday - Friday</span></span>
                    <b class="color-4"><span class="Text">08:30 AM - 17:00 PM</span></b>
                </span>
                
                <span class="company-info">
                    <span class="white"><span class="Text">Address</span></span>
                    <b class="color-4"><span class="Text">Sofia, Bulgaria</span></b>
                </span>
            </div>
        </div>
    </section>

    <section id="menu-section" class="clear" style="height: 161px;">
        <div id="sticky-menu" class="clear">
            <div class="frame">
                <div class="logo-section inline-block contain paddingX-30">
                    <img class="image" src="https:///web.imasmi.com/plugin/WebCss/file/logo.svg">
                </div>
                
                <div class="inline-block">
                    <div id="menu-header-container">
                        <div class="menu" id="menu-header">
                            <div class="menu-content">
                                <ul class="top-menu">
                                    <li class="menu-item active"><a href="/" title="">Home</a></li>
                                    <li class="menu-item active"><a href="/" title="">About</a></li>
                                    <li class="menu-item active"><a href="/" title="">Service</a></li>
                                    <li class="menu-item active"><a href="/" title="">Contact</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>     
</div>


<div id="credit" class="text-right">
    <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>

CSS


body{background-color: #666666; height: 1500px;}

.top-header{padding: 7px 0; font-size: 0.9em;}
.company-info{margin-right: 15px;}
.company-info > span{margin-right: 2px;}
.company-socials a{color: inherit;}
#menu-section{ position: relative;}
#menu-section #logo{width: 7px;}
#menu-section #logo-text{flex: 1; margin-left: 5px;}
#menu-section .logo-heading{margin: 0; max-width: 220px;}
#menu-section h1{line-height: 62px;}
#menu-section #logo-text h6{font-size: 13px; font-weight: normal; margin-top: 5px;}
#search-icon{font-size: 2em;}
.menu .menu-content{margin: 10px 0; height: auto;}
.menu-item{display: inline-block; position: relative; margin: 0 10px;}
.logo-section{width: 200px; height: 80px;}

/* STICKY MENU STYLE */
#sticky-menu{ background-color: #ffffff; width: 100%; z-index: 3; transition: 0.5s top; padding: 30px 0; }
.sticky-header{position: fixed; top: -100%; transition: 0.5s;}
.sticky-show{top: 0;}
/* STICKY MENU STYLE */

#credit{margin: 50px 50px 0 0; float: right;}
#credit a{color: #97b5d0; text-decoration: none;}

@media (max-width: 1080px){
    #header{text-align: center;}
}

JavaScript


//STICKY MENU VANILLA JS
    var topPos = 0;
    var stickyMenu = document.getElementById("sticky-menu");
    stickyMenu.parentElement.style.height = stickyMenu.clientHeight + "px";
    var stickyOffset = stickyMenu.getBoundingClientRect().top + window.pageYOffset;
    
    window.addEventListener("scroll", function(){
        if(window.pageYOffset > stickyOffset + stickyMenu.clientHeight){
            stickyMenu.classList.add("sticky-header");
            if(topPos > window.pageYOffset){
                stickyMenu.classList.add("sticky-show");
            } else {
                stickyMenu.classList.remove("sticky-show");
            }
        }
        
        if(window.pageYOffset <= stickyOffset){
            stickyMenu.classList.remove("sticky-header");
            stickyMenu.classList.remove("sticky-show");
        }
        topPos = window.pageYOffset;
    });
Imasmi web loading