In my navbar, I have two images (1 for the logo, and 1 for the text image) that were joined, but the text image is long that when you view its webpage on a mobile screen, it will go below the logo.

[navbar with two images merged as one for the header](https://i.stack.imgur.com/oh1R6.png)

How can I hide the text image when overflow?

[incorrect adjustment of images, the text image should be hidden now since it's overflow](https://i.stack.imgur.com/3emtu.png)

Thanks!

Here's my current code (unnecessary codes are removed)"

```css
    #header-background {
        height: 108px;
        background-image: url('/images/header-background.png');
        background-position: center;
        background-size: 500px 108px;
        background-repeat: "repeat-y";
    }

    .sidebar-mini.sidebar-collapse .main-header .navbar {
        margin-left: 0px;
    }

    .main-header .navbar {
        margin-left: 0px;
    }
```

```html
<header class="main-header">
    <nav class="navbar navbar-static-top" role="navigation">
        <div>
            <div id="header-background">
            </div>

            <div style="position: absolute; left: 40px; top: 0px; right: 88px; overflow: hidden;">
                <img src="/images/header-logo-only.jpg" alt="logo banner" height="108"></img> <!-- LOGO -->
                <img src="/images/header-text-only.jpg" alt="text banner" height="108"></img> <!-- TEXT IMAGE THAT IS LOOOOONG -->
            </div>
        <div>
    </nav>
</header>
```