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

CodePudding user response：

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