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;
});