Impossible to apply css properly on a NavDropDown

Question

I am trying to add a drop down list to my header using react-bootstrap

The code look like this

const profileImage = <div>
                <img className="header-avatar-pic" 
                    src={ProfilePicAvater} 
                    alt="user pic"
                />
            </div>
        const menuProfile = 
            <NavDropdown title={profileImage} id="basic-nav-dropdown" bsPrefix="drop-down-menu">
                <p>Sebastien Cayet</p>
                <NavDropdown.Divider className="header-divider"/>
                <NavDropdown.Item  bsPrefix="nav-item" href="/profile">{TextContents.MenuProfile}</NavDropdown.Item>
                <NavDropdown.Item  bsPrefix="nav-item" href="/messages">{TextContents.MenuMessages}</NavDropdown.Item>
                <NavDropdown.Item  href="/settings">{TextContents.MenuSettings}</NavDropdown.Item>
                <NavDropdown.Item  href="/logout">{TextContents.MenuLogout}</NavDropdown.Item>                
            </NavDropdown>;

associated Css

.header-divider {
    background-color: #ff7255; 

}

.drop-down-menu {
    background-color: red;
    border-radius: 50px;
    box-shadow: "0px 8px 18px 0 rgba(0,0,0,0.14)";
}


.header-drop-down-name {
    font-size: 20px;
    font-family: Source Sans Pro;
    color: #333333;
    font-weight: bold;
}

.nav-item{
    font-size: 20px;
    font-family: Source Sans Pro;
    color: #616161;
    font-weight: normal;
}

.nav-item:hover{
    color: #ff7255;
}

It'really weird. I can't change the divider color and size, the items in the drop down are all on the same line instead of being one below the other and it's has soon as I am applying a css. nothing fancy yet but, it's annoying because I am not able able to add also rounded corner and shadow on the box surrounfing the drop down... it feels that none of the css are working properly. In all other part of my code it works. it's only when using Nav

it should look like this:

but instead it looks like this:

the arrow is not properly placed, the menu open not on the correct side, the divider is not using the right color..

i have also added the bootstrap in the index.js

import 'bootstrap/dist/css/bootstrap.css';

Here is a Sandbox link:SandBoxCode

Definitly need your help

Thanks all

Answer 1

Do these required changes:

const menuProfile = (
  <NavDropdown
    title={profileImage}
    id="basic-nav-dropdown"
    bsPrefix="drop-down-menu"
  >
    <p>Sebastien Cayet</p>
    <NavDropdown.Divider className="header-divider" />
    // Replace bsPrefix property with className property. 
    // change the className from `nav-item` to `anyClassName`. Here it is `nav-items`
    <NavDropdown.Item className="nav-items" href="/profile">
      {TextContents.MenuProfile}
    </NavDropdown.Item>
    // Replace bsPrefix property with className property. 
    // change the className from `nav-item` to `anyClassName`. Here it is `nav-items`
    <NavDropdown.Item className="nav-items" href="/messages">
      {TextContents.MenuMessages}
    </NavDropdown.Item>
    <NavDropdown.Item href="/settings">
      {TextContents.MenuSettings}
    </NavDropdown.Item>
    <NavDropdown.Item href="/logout">
      {TextContents.MenuLogout}
    </NavDropdown.Item>
  </NavDropdown>
);