navbar-brand text not visible when burger is visible

[jluttine]

I'm using text in navbar-brand instead of logo/image. Here's a snippet:

<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="#">
            Awesome Company
        </a>
        <a role="button" class="navbar-burger" data-target="navbarMenu" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>
</nav>

The text "Awesome Company" shows just fine when viewed on desktop but on mobile or narrow screen, the burger shows up and the text "Awesome Company" becomes invisible. It's still there, and becomes visible when I hover over it with my mouse but when I move the mouse away, it becomes invisible again.

If the CSS style makes a difference, I'm using flatly from bulmaswatch.

[jluttine]

As a workaround, I added has-text-white to class of navbar-item.