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

The following line can be included in your src/index.js or App.js file `import 'bootstrap/dist/css/bootstrap.min.css';` Have you imported it? — Darsh Shah, Jul 01 '20 at 18:44
@DarshShah yes. I hope i did it properly. Please check the description, I have updated it — Seb, Jul 01 '20 at 18:52
it would be great if you share the CodePen link for this. Just to debug what's the issue is. And are you following any documentation for this? if so, share that too. — Darsh Shah, Jul 01 '20 at 18:59
@DarshShah I have added a SandBox link with, The code is working following this sandbox — Seb, Jul 01 '20 at 19:12
CodePen link doesn't include your project code. Can you check that and update the link of your working project in which stylings are not applied as per the expectations. — Darsh Shah, Jul 01 '20 at 19:36
@DarshShah I have updated the link and the project is public — Seb, Jul 01 '20 at 20:51
Just to make `Profile` & `Messages` align in a column, you have to add `display: flex` & `flex-direction: column` in `nav-item` class. Also, replace the `bsPrefix` property with className. This will resolve your issue. — Darsh Shah, Jul 02 '20 at 08:22

score 0 · Accepted Answer · answered Jul 02 '20 at 08:29

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>
);

Impossible to apply css properly on a NavDropDown

1 Answers1