How to make my scrollbar invisible but working on desktop?

Question

I have a problem, I am trying to integrate a smiple mockup to html/css/js, I started with mobile, and as you all know, the scrollbar in mobile is light, not so ugly, but on desktop ( browser ) it is so ugly, I want to remove it but i want the scroll effect, I will explain with images first what I have and what I want I want to achieve, here is what I want:

I can scroll with my finger ( on mobile ), and mouse on the desktop, but here what I have on desktop:

And it is fine on mobile, since it has a good scrollbar anyways:

So to do that in desktop, I tried to hide the scroll bar, setting the background to transparent, I was expecting it to work, the scroll is not shown now and also the bar is not working.

Here is my html code: ( the links inside are repeated, so it is a simple code )

<div class="header">
    <div class="header__top-bar">
        <div class="header__logo-icons">
            <div class="header__icons-container">
                <a href="#">
                    <img src="assets/images/facebook.png" alt="facebook">
                </a>
                <a href="#">
                    <img src="assets/images/instagram.png" alt="facebook">
                </a>
                <a href="#">
                    <img src="assets/images/pinterest.png" alt="facebook">
                </a>
            </div>
        </div>
        <div class="header__options">
            <a href="#" onclick="showDetails(0)">
                Dernières Minutes
            </a>
            <a href="#" onclick="showDetails(1)">
                Vol
            </a>
            <a href="#" onclick="showDetails(2)">
                Séjour
            </a>
            <a href="#" onclick="showDetails(3)">
                Location
            </a>
            <a href="#" onclick="showDetails(4)">
                Camping
            </a>
            <a href="#" onclick="showDetails(5)">
                Hôtel
            </a>
            <a href="#" onclick="showDetails(6)">
                Train
            </a>
        </div>
    </div>
    <div class="header__option-details">
        <a href="#" onclick="activateOption(0)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(1)" class="header__option-details-chip">
            <span>Text two</span>
        </a>
        <a href="#" onclick="activateOption(2)"class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(3)" class="header__option-details-chip">
            <span>Text Okay</span>
        </a>
        <a href="#" onclick="activateOption(4)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(5)" class="header__option-details-chip">
            <span>Do this</span>
        </a>
        <a href="#" onclick="activateOption(6)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(7)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(8)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(9)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(10)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(11)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(12)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(13)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(14)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(15)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(16)" class="header__option-details-chip">
            <span>Text</span>
        </a>

        <a href="#" onclick="activateOption(17)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(18)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(19)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(20)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(21)" class="header__option-details-chip">
            <span>Text</span>
        </a>
    </div>
</div>

Here is my css file: ( the.header_option-details and.header__options are what matters ) ( also I removed the css that set the scrollbar background to transparent )

.header {
    position: relative;
    width: 100%;
}

.header__top-bar {
    width: 100%;
    padding: 10px 10px 5px 10px;
    background-color: #293847;

}

.header__logo-icons {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.header__logo {
    height: 20px;
    max-width: 250px;
}

.header__icons-container a {
    display: inline-block;
    margin-left: 20px;
}

.header__icons-container img {
    width:20px;
    height: 20px;
}

.header__options {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    padding-bottom: 10px;
}


.header__options a {

    margin-right: 20px;
    position: relative;

    font-size: 14px;

    text-decoration: none;

    color: #ffffff;
    font-family: Arial, sans-serif;

    /* Add white-space: nowrap */
    white-space: nowrap;
}

.header__options--active {
    font-weight: bold;
}


.header__options--active::after {
    content:'';
    position: absolute; 
    top: 18px; 
    left: 0px; 
    height: 3px; 
    width: 100%; 
    background-color: #e23a05; 
    display: inline-block;
}

.header__options a:last-child {
    margin-right: 0;
}

.header__option-details {
    display: flex;
    margin: 10px;
    overflow-x: scroll;
}

.header__options::-webkit-scrollbar, .header__option-details::-webkit-scrollbar {
    /*background: transparent;*/
}

.header__option-details-chip {
    padding: 7px 20px 7px 20px;
    border: 1px solid #d7d9e4;
    border-radius: 20px;
    margin-right: 10px;
    text-decoration: none;
    color: #323232;
    font-family: Arial, sans-serif;

    font-size: 14px;
    /* Add white-space: nowrap */
    white-space: nowrap;
}


.header__option-details-chip:last-child {
    margin-right: 0;
}


.header__option-details-chip--active {
    color: #e23a05;
}

/******************
** Media queries **
******************/

@media screen and (max-width: 600px){
    .header__options::-webkit-scrollbar, .header__option-details::-webkit-scrollbar {
        display: none;
    }
}

@media screen and (min-width: 599px){
    .header__top-bar {
        padding: 15px 20px 5px 20px;
    }
    .header__logo {
        height: 35px;
        max-width: 350px;
    }

    .header__option-details {
        margin: 10px 20px;
    }

    .header__option-details-chip {
        margin-right: 20px;
    }

    .header__options a, .header__option-details-chip span {
        font-size: 16px;
    }

}

Answer 1

 .header { position: relative; width: 100%; }.header__top-bar { width: 100%; padding: 10px 10px 5px 10px; background-color: #293847; }.header__logo-icons { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }.header__logo { height: 20px; max-width: 250px; }.header__icons-container a { display: inline-block; margin-left: 20px; }.header__icons-container img { width:20px; height: 20px; }.header__options { display: flex; width: 100%; overflow-x: scroll; padding-bottom: 10px; }.header__options a { margin-right: 20px; position: relative; font-size: 14px; text-decoration: none; color: #ffffff; font-family: Arial, sans-serif; /* Add white-space: nowrap */ white-space: nowrap; }.header__options--active { font-weight: bold; }.header__options--active::after { content:''; position: absolute; top: 18px; left: 0px; height: 3px; width: 100%; background-color: #e23a05; display: inline-block; }.header__options a:last-child { margin-right: 0; }.header__option-details { display: flex; margin: 10px; overflow-x: scroll; }.header__options::-webkit-scrollbar, .header__option-details::-webkit-scrollbar { /*background: transparent;*/ }.header__option-details-chip { padding: 7px 20px 7px 20px; border: 1px solid #d7d9e4; border-radius: 20px; margin-right: 10px; text-decoration: none; color: #323232; font-family: Arial, sans-serif; font-size: 14px; /* Add white-space: nowrap */ white-space: nowrap; }.header__option-details-chip:last-child { margin-right: 0; }.header__option-details-chip--active { color: #e23a05; } /****************** ** Media queries ** ******************/ @media screen and (max-width: 600px){.header__options::-webkit-scrollbar, .header__option-details::-webkit-scrollbar { display: none; } } @media screen and (min-width: 599px){.header__top-bar { padding: 15px 20px 5px 20px; }.header__logo { height: 35px; max-width: 350px; }.header__option-details { margin: 10px 20px; }.header__option-details-chip { margin-right: 20px; }.header__options a, .header__option-details-chip span { font-size: 16px; }::-webkit-scrollbar { height:10px; background: transparent; /* Optional: just make scrollbar invisible */ } }

 <div class="header"> <div class="header__top-bar"> <div class="header__logo-icons"> <div class="header__icons-container"> <a href="#"> <img src="assets/images/facebook.png" alt="facebook"> </a> <a href="#"> <img src="assets/images/instagram.png" alt="facebook"> </a> <a href="#"> <img src="assets/images/pinterest.png" alt="facebook"> </a> </div> </div> <div class="header__options"> <a href="#" onclick="showDetails(0)"> Dernières Minutes </a> <a href="#" onclick="showDetails(1)"> Vol </a> <a href="#" onclick="showDetails(2)"> Séjour </a> <a href="#" onclick="showDetails(3)"> Location </a> <a href="#" onclick="showDetails(4)"> Camping </a> <a href="#" onclick="showDetails(5)"> Hôtel </a> <a href="#" onclick="showDetails(6)"> Train </a> </div> </div> <div class="header__option-details"> <a href="#" onclick="activateOption(0)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(1)" class="header__option-details-chip"> <span>Text two</span> </a> <a href="#" onclick="activateOption(2)"class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(3)" class="header__option-details-chip"> <span>Text Okay</span> </a> <a href="#" onclick="activateOption(4)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(5)" class="header__option-details-chip"> <span>Do this</span> </a> <a href="#" onclick="activateOption(6)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(7)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(8)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(9)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(10)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(11)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(12)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(13)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(14)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(15)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(16)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(17)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(18)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(19)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(20)" class="header__option-details-chip"> <span>Text</span> </a> <a href="#" onclick="activateOption(21)" class="header__option-details-chip"> <span>Text</span> </a> </div> </div>

This helped me

::-webkit-scrollbar {
  height: 10px;  
  background: transparent;  /* Optional: just make scrollbar invisible */
}