How to remove box-shadow when side bar collapse (with toggle button)? - css

Question

I made this sidebar and I cannot remove box-shadow when it collapse. I tried box-shadow: none; also box-shadow: none !important; box-shadow: transparent; even tried to change color: box-shadow: yellow; and it does not work. What should I do to remove shadow when it collapsing? It is all about 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; /* Normal box shadow */
}
.navbar-collapse {
background: transparent;
height: inherit;
/* box-shadow: none; */ /* override box shadow */
box-shadow: yellow;
}
.collapse {
box-shadow: none; /* override box shadow */
}
#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;
}

Answer 1

1: You're not resetting the box shadow on the same element
2: CSS is interpreted top down - box-shadow of none is being immediately overriden.
.sidebar-container {
position: fixed;
width: 242px;
left: 0;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
box-shadow: 5px 0 5px -5px #333; /* Normal box shadow */
}
.navbar-collapse {
background: transparent;
height: inherit;
box-shadow: none; /* override box shadow */
}
.collapse {
box-shadow: none; /* override box shadow */
}
#navbarSupportedContent {
flex-direction: column;
align-items: flex-start;
}