-4

I'm making a pure CSS animated navbar using the checkbox as a hamburger menu toggler, changing various elements with :checked and the + selector, which I've gotten to work on grand-child elements, but not siblings, I haven't found an adequate solution on the web either. Here's my HTML code, obviously stripped down a little:

.toggler:checked+.menu {
  width: 350px;
}
<div class="menu">
  <div class="menu-background"></div>
  <div class="menu-navigation"></div>
</div>
<input type="checkbox" class="toggler">
<div class="hamburger">

I got it to work on children of the hamburger class, so I'm fairy confident its an issue with the selector

CodeIt
  • 3,492
  • 3
  • 26
  • 37
deleted_user2312
  • 1
  • 1

3 Answers3

0

Try using ~ instead of + to see if it helps you

Anderson Isaac
  • 131
  • 6
  • I did try using ~, it didn't seem to work. I read somewhere it's only for the next sibling not a previous one, which I suspect may be the reason – deleted_user2312 Dec 19 '20 at 04:44
  • Yeah sure, if I remember well you can't use a selector to make changes to an element parent or a previous siblings. I suggest you use some javascript or jquery for that. – Anderson Isaac Dec 19 '20 at 04:53
0

There are two sibling selectors in CSS:

  • + selects the next sibling and
  • ~ selects any following sibling

As of now, there is no previous sibling selector in CSS, so you're going to have to change the order of your elements or use JavaScript.

Angel Politis
  • 10,955
  • 14
  • 48
  • 66
0

Just put the checkbox input above the ".menu" class div. Then it will work fine. I just added some background and text to show the result. Hope this will help you 

    .menu {
      background-color: red;
    }
    .toggler:checked+.menu {
      width: 350px;
    }
    <input type="checkbox" class="toggler">
    <div class="menu">
      abc
      <div class="menu-background"></div>
      <div class="menu-navigation"></div>
    </div>
    
    <div class="hamburger">
Mamta Thakur
  • 147
  • 1
  • 9