Is it possible to style the button that activates the offscreen nav when the nav is open? The other items in Bootstrap have aria-expanded="false"

Question

In bootstrap's docs it doesn't seem that the buttons that open them have an aria-expanded="true"

I set up an .active :active state for my offcanvas navs buttons that seems to not be auto set to any type of active state. Normally hover and focus states are similar, and usually, with bootstrap, there is an an aria-expanded="true" that gets set for tabs, accordions, collapses, dropdowns. But I didn't see this looking through the docs, and was wondering if it needed to be swapped out with the javascript.

//css
.nav-item:hover .nav-link span,
.nav-item:focus .nav-link span {
  background-color: #fde7f8;
}

.nav-link:active span {
  background-color: hsl(315, 87%, 75%);
  font-weight: normal;
}

.nav-link:active .active-indicator-mobile {
  background-color: hsl(315, 87%, 75%);
}

.nav-link[aria-expanded="true"] span {
  background-color: hsl(315, 87%, 75%);
  font-weight: normal;
}

<!-- html -->
<li class="nav-item d-xl-none d-block">
  <a href="#" class="nav-link d-flex text-center justify-content-center flex-column" role="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSide" aria-controls="offcanvasSide">
    <span class="icon-resources"></span>Resources
    <div class="active-indicator-mobile"></div>
  </a>
</li>

Is it possible to style the button that activates the offscreen nav when the nav is open? The other items in Bootstrap have aria-expanded="false"

0 Answers0