Sticky Header Menu - 1

sticky header putih

<!-- AWAL NAVBAR MELAYANG -->

<div class="headermenu">

    <a href="/" class="logos"><img alt="logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwU6Hd3LWQTlHVf-2ox1xxbTG-oL0vMwgQoAlLKFAHJAAoZCXjmO-vcjGPMAj9WqxhSgQl-Xqvy0QMSKdGqH_Ds-bcOKb7pq2g0OV8nkdbqDx-d9653OLmEOCM-1NoM21S2bo-VB3yOZs/s1600/logo.png" /></a>

    <nav class="navbar">

        <a href="/">Home</a>

<a href="#">Tentang Kami</a>

        <a href="#">Produk</a>

<a href="#">Order</a>

        <a href="#">Kontak</a>

        <a href="#">Blog</a>

    </nav>

    <div id="menu-btn" class="fas fa-bars"></div>

</div>

<style>

.headermenu{

    position: fixed;

    top:0; left:0; right: 0;

    z-index: 1000;

    background: #ffffff;

    box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:0 9%;

transition: all .3s ease-out;

}

.headermenu .logos{

    font-size: 2.5rem;

    color:#2167c7;

    font-weight: bolder;

}

.headermenu .logos img{

    max-width:240px;

}

.headermenu .navbar{ 

margin-top: 2.4rem;

  margin-bottom: .5rem;

transition: all .3s ease-out;

}

.headermenu .navbar a{

    font-size: 1.7rem;

    color: #2167c7;

    margin-left: 1.7rem;

transition: all .3s ease-out;

}

.headermenu .navbar a:hover{

    color:#ffffff;

background: #2167c7;

padding:.5rem 1rem;

    border-radius: .5rem;

transition: all .3s ease-out;

}

#menu-btn{

    cursor: pointer;

    font-size: 2rem;

    padding:1rem 1.3rem;

    border-radius: .5rem;

    color: #ffffff;

    background: #2167c7;

    display: none;

}

#menu-btn:hover{

    color: #2167c7;

    background: #fff;

}

.headermenu .dropdown{padding:1rem;}

.headermenu .dropdown-menu{;padding:1rem;}

@media (max-width:768px){

 #menu-btn{

        display: initial;

    }

.headermenu{padding:1rem 4%;}

    .headermenu .navbar{

        position: absolute;

        top:110%; right: 1.5rem;

        background:#ffffff;

        box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);

        border:.1rem solid rgba(0,0,0,.1);

        border-radius: .5rem;

        width: 28rem;

        transform: scale(0);

        transform-origin: top right;

        opacity: 0;

margin-top: 0.5rem;

padding:0.3rem;

    }

    .headermenu .navbar.active{        

        transform: scale(1);

        opacity: 1;

    }

    .headermenu .navbar a{

        font-size: 1.7rem;

        display: block;

        padding:0.7rem;

        margin: 0.2rem;

        border-radius: .5rem;

    }

    .headermenu .navbar a:hover{

        background: #2167c7;

padding:0.7rem;

    }

}

</style>

<script>

let menu = document.querySelector('#menu-btn');

let navbar = document.querySelector('.navbar');

menu.onclick = () =>{

    menu.classList.toggle('fa-times');

    navbar.classList.toggle('active');

} 

window.onscroll = () =>{

    menu.classList.remove('fa-times');

    navbar.classList.remove('active');

} 

</script>

<!-- AKHIR NAVBAR MELAYANG -->

Keterangan:

untuk mengganti warna teks, silahkan cari kode warna  #2167c7 (ada 6)

silahkan ganti dengan kode warna yang anda inginkan.