reactstrap Collapse is not showing up on mobile

Question

The website I'm working on has an issue where the collapsible menu that's supposed to show up when the screen size is too small is transparent. It still works, but it's not visible, which obviously isn't what I intended. I'm using reactstrap to make the collapsible menu but I haven't discovered a way to make it visible so far in my research.

Can someone please help me solve this issue? The file where this issue happens is here in the render method.

<Navbar expand="sm" className="mb-3 my-navbar">
    <Container>
        <NavbarBrand tag={RRNavLink} exact to="/"
            className="my-navbar-brand">Writer</NavbarBrand>
        <NavbarToggler onClick={this.toggle} />
        <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
                {isAuthenticated ? authLinks : guestLinks}
            </Nav>
        </Collapse>
    </Container>
</Navbar>

Answer 1

Since you are not using a theme for your navbar, the CSS for the toggler button is not appearing. As a fix you can try to add a theme to the navbar, e.g., navbar-light and you will see that the hamburger button appears

<Navbar expand="sm" className="mb-3 my-navbar navbar-light">

Alternatively, you can add the CSS for which ever color of the stroke you prefer. Here is the CSS for the navbar-light hamburger button strokes:

.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}