0

I have an a tag and a button in navigation:

 <nav class="navigation">
        <a href="./index.html" class="logo-header"><span class="logo-part">Web</span>Project</a>
        <button type="button" class="menu-button" aria-expanded="false" aria-controls="menu-container" data-menu-button>
          <svg class="menu-icons" width="40" height="40" aria-label="mobile menu control ">
            <use class="menu__nav-cross" href="./images/sprite.svg#nav-cross"></use>
            <use class="menu__nav-menu" href="./images/sprite.svg#nav-open"></use>
          </svg>
        </button>

When I press the button from js script it adds a class to the button "is-open". I want to make it so that when the class "is-open" present, a tag is not displayed using css. I tried doing something like this but it doesnt work:

.menu-button.is-open .logo-header{
  display: none;
}
Tom
  • 21
  • 5
  • With a links there is the `.active` element.. Can you post your js script that you are using? – JCBiggar Feb 25 '21 at 13:38
  • You can not access an element based on its sibling upwards. you can access the button based on Anchor's Class, anchor and button based on Navigation class but u can not access the Anchor based on Button's class. – Atul Rajput Feb 25 '21 at 13:40
  • do one thing, where your JS is adding the is-open class on button, in the same event add a class on Navigation too and then handle it like this: .navigation.newClass .logo-header {display: none;} – Atul Rajput Feb 25 '21 at 13:41
  • css won't find a previous sibling like this – Professor Abronsius Feb 25 '21 at 13:44
  • add the class to the parent instead then you can style the children depending on that parent class – Pete Feb 25 '21 at 14:00
  • Well, I spent the time writing the answer, which I can't post as this got closed... so it's here: https://www.stevefenton.co.uk/2021/02/using-sibling-selectors-to-style-the-element-before-the-match/ – Fenton Feb 25 '21 at 14:05

0 Answers0