0

I've tried to change the bg color of the .navbar class when a child has [aria-expanded="true"] in (Bootstrap) Sass. This doesn't work (probably because the @extend cant reach out of the nested class). Anyone have an idea on how to best solve this? *i'm relatively new to this.

.navbar {
      .navbar-toggler {
        &[aria-expanded="true"] {
          .navbar-toggler-icon {
            background-image: url("#{$fo-font-path}/icon-black.svg");
            transform: rotate(0deg);
          }
          @extend .navbar;
          background-color: red;
        }
      }
    }
Sander Huizing
  • 1
  • Welcome to Stack Overflow! What are you actually trying `@extend`? Extend adds property styles into the `.navbar-toggler` class. Something tells me that's not what you want. – disinfor Feb 02 '20 at 17:06
  • hi, thanks! i was trying to extend the .navbar . What do you recommend using instead of this? – Sander Huizing Feb 02 '20 at 17:23
  • I just read your question again, you can't do what you are trying to do. There is no such thing as a parent selector. – disinfor Feb 02 '20 at 18:37
  • Partly. I think i have to use a javascript thingy to get this to work. – Sander Huizing Feb 02 '20 at 18:59
  • https://www.w3schools.com/howto/howto_js_toggle_class.asp this was the (very simple) solution :p – Sander Huizing Feb 02 '20 at 19:18
  • Correct. Your question was about CSS/SASS and trying to select a parent element - which is not possible. With JS, yes, you can do it. – disinfor Feb 02 '20 at 21:33

0 Answers0