I've encountered an issue with my dropdown menu that works perfectly on desktop:
https://i.sstatic.net/73Z0X.png
However, on mobile devices, it appears to be transparent for some reason:
https://i.sstatic.net/dhtOw.png
Here is the code snippet responsible for implementing the dropdown:
<UncontrolledDropdown>
<DropdownToggle
aria-expanded={false}
aria-haspopup={true}
caret
color="danger"
data-toggle="dropdown"
href="#pablo"
id="dropdownMenuButton"
nav
onClick={(e) => e.preventDefault()}
role="button"
>
{this.state.category == "" ? "category" : this.state.category}
</DropdownToggle>
<DropdownMenu
aria-labelledby="dropdownMenuButton"
className="dropdown-danger"
>
{categoryDropDownItemsNames.map((categoryDropDownName) => (
<DropdownItem
tag="span"
name="category"
value={categoryDropDownName}
// onClick={(e) => e.preventDefault()}
onClick={this.onCategoryChosen}
>
{categoryDropDownName}
</DropdownItem>
))}
</DropdownMenu>
</UncontrolledDropdown>
Can anyone provide insights into why this unexpected behavior is occurring?