¿Cómo puedo hacer que div scroll overflow-x funcione en un navegador móvil?

Tengo este código que funciona en los navegadores de escritorio. ¿Cómo puedo lograr este comportamiento en los navegadores móviles? Básicamente quiero crear un menú que se desplace hacia los lados.

<style type="text/css">
    #navBar {
        height: 55px;
        width: 80px;
        overflow-x: scroll;
        overflow-y:hidden;
        white-space: nowrap;
    }

    #navBar div {
        display: inline-block;
    }
    </style>


    <div id="navBar">
            akdhbaIDBhbfbhwhfbaibf
            <div style="width: 100px; text-align: center; background-color: red;">
                <img src="" alt="Nav1" />
                <br />
                <span style="font-size: 80%">Nav1</span>
            </div>
            <div style=" width: 100px; text-align: center;">
                <img src="" alt="Nav2" />
                <br />
                <span style="font-size: 80%">Nav2</span>
            </div>
            <div style=" width: 100px; text-align: center; background-color: red;">
                <img src="" alt="Nav3" />
                <br />
                <span style="font-size: 80%">Nav3</span>
            </div>
    </div>