I have been struggling with removing the box-shadow from my sidebar when it collapses. I have tried various CSS methods like box-shadow: none;, box-shadow: none !important;, and box-shadow: transparent;. I even attempted changing the color to box-shadow: yellow; but none of them seem to work. How can I successfully remove the shadow when the sidebar collapses? This issue pertains to React components:
<div>
<div className="sidebar-container container-flex navbar-expand-sm navbar-light">
<div className="navbar-header bg-white">
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
</div>
<div
className="collapse navbar-collapse bg-white .d-none .d-sm-block .d-md-none"
id="navbarSupportedContent"
>
<div className="title1">Title</div>
<div className="title2">Title 2</div>
<ul className="mr-auto mb-2 mb-lg-0">
{<SidebarElement props={props} />}
</ul>
</div>
</div>
</div>
This is Sidebar CSS:
li {
list-style-type: none;
}
.title1 {
font-family: "Roboto";
font-style: normal;
font-weight: 700;
font-size: 26px;
letter-spacing: 0.5px;
padding-top: 24px;
padding-left: 24px;
padding-bottom: 28px;
color: #336cfb;
}
.title2 {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.5px;
padding-top: 24px;
padding-left: 24px;
padding-bottom: 20px;
color: #52575c;
}
.active-link {
color: #336cfb;
}
.sidebar-container {
position: fixed;
width: 242px;
left: 0;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
box-shadow: 5px 0 5px -5px #333;
}
.navbar-collapse {
background: transparent;
height: inherit;
box-shadow: yellow;
}
.collapse {
box-shadow: none;
}
#navbarSupportedContent {
flex-direction: column;
align-items: flex-start;
}
This is SidebarElement css:
.nav-link {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
padding-top: 8px;
padding-bottom: 8px;
font-family: "Roboto";
font-style: normal;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.5px;
color: #52575c;
}
.customIcon {
width: 18px;
padding-right: 10px;
color: #dbdde0;
}
li {
list-style-type: none;
padding: 14px 10px;
}
.active-link {
color: #336cfb;
}