Sticky Header Menu - 2

Sticky Background Transparant

<!-- AWAL NAVBAR MELAYANG -->

<div class="headermenu">

    <a href="/" class="logos"><img alt="logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB0IUgh-OzLhqcXdMelJ-D053FuWuZe9hD0b89u0YMGFzYra21oy8iFD24UiT_0KxBtnWsRJR_MZOkISDH1b1wyPXiqYpijQe-ZYnuHvoGsFFXrj5YspQ2kX440U0Yx2aB-qR6IZOmz8VipFXDFUYlqQvDR0RQZ40wntV30k3d_BYDs1tFZv2CdT2nRWA/s16000/LOGO%20CICIL.png" /></a>

    <nav class="navbar">

        <a href="https://www.dicicilaja.id/">Home</a>

<a class="anchor" href='https://drive.google.com/file/d/1Macwwmghw9r81u8N4KE3YQ2Sg2taeSJL/view?usp=drive_link'>Program AXI</a>

        <a class="anchor" href='https://drive.google.com/file/d/1MUhdCKCzARTwzdsuW3jcFhUOV7h_GM0D/view?usp=drive_link'>Program CicilAja</a>

        <a class="anchor" href='https://www.adiraafinance.com/'>Pengajuan Multiguna</a>

        <a href='https://api.whatsapp.com/send?phone=628117708099&text=Halo%20Admin%20Adiraku,%20Saya%20Butuh%20Bantuan%20Tentang%20Layanan%20di%20Adira,%20Mohon%20Respon%20Segera.'>Kontak</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:linear-gradient(to bottom, rgba(23,101,226,0), rgba(23,101,226,0));

    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:#38B6FF;

    font-weight: bolder;

}

.headermenu .logos img{

    max-width:230px;

}

.headermenu .navbar{ 

margin-top: 2.4rem;

margin-bottom: 1rem;

transition: all .3s ease-out;

}

.headermenu .navbar a{

    font-size: 1.7rem;

    color: #38B6FF;

    margin-left: 2rem;

transition: all .3s ease-out;

}

.headermenu .navbar a:hover{

    color:#020100;

background: #38B6FF;

padding:1rem;

    border-radius: .5rem;

transition: all .3s ease-out;

}

#menu-btn{

    cursor: pointer;

    font-size: 2rem;

    padding:1rem 1.3rem;

    border-radius: .5rem;

    color: #020100;

    background: #38B6FF;

    display: none;

}

#menu-btn:hover{

    color: #38B6FF;

    background: #020100;

}

.headermenu .dropdown{padding:1rem;}

.headermenu .dropdown-menu{padding:10px 10px 10px 5px;margin:0;background:#5526ee}

@media (max-width:768px){

 #menu-btn{

        display: initial;

    }

.headermenu{padding:1rem 4%;}

    .headermenu .navbar{

        position: absolute;

        top:110%; right: 1.5rem;

        background:linear-gradient(to bottom, rgba(23,101,226,0), rgba(23,101,226,0));

        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: #38B6FF;

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 -->