CODEWITHSUNDEEP
cssreactjsdropdownreact-bootstrap
CourtneyJ
CourtneyJ

Reputation: 508

React Navbar dropdown items showing only text and not menu behind

I have dropdownMenu's inside my navbar and for some reason I can not figure out the background for the menu is not showing only the dropdownItems text so the words are just floating in a line on the page. Ive tried setting the menu's z-index to 10 but this does not work. I am stumped

             <Dropdown
                  toggle={() => handleToggle(item.label)}
                  isOpen={isOpen === item.label}
                  className="adminTools"
                  inNavbar
                >
                  <DropdownToggle nav>{item.label}</DropdownToggle>
                  <DropdownMenu className="menu">
                    {item.value.map((menuItem, id) => (
                      <>
                        <DropdownItem className="dropdownItem p-0" >
                            <NavLink
                              tag={Link}
                              to={menuItem.link}
                              key={`${id}-${menuItem.value}-link`}
                              className="nav-link"
                            >
                              {menuItem.label}
                            </NavLink>
                        </DropdownItem>
                      </>
                    ))}
                  </DropdownMenu>
                </Dropdown>

.menu {
  width: 175px;
  font-size: 14px;
}

.dropdownItem {
  white-space: pre-wrap;
 
}
.nav-link {
  font-weight: bold;
  color: rgba(32, 30, 30, 0.829);
}

enter image description here

Upvotes: 0

Views: 63

Answers (1)

Igor Gonak
Igor Gonak

Reputation: 2250

I copy/pasted your code and run it. Everything seems fine:

enter image description here

Make sure you have imported the css from bootstrap.

Upvotes: 1

Related Questions