html - My parent element is not getting affected -


i trying make sliding hamburger menu, , unable move div left when checkbox (icon) checked. html following:

<div class="nav">     <div class="container">         <img src="{{ asset('assets/images/user.jpg') }}">         <a href="#">sameer manek</a>     </div> </div> <div class="window">     <input type="checkbox" id="nav-trigger" class="nav-trigger" />     <label for="nav-trigger"><i class="fa fa-bars"></i></label>     {% block main %}{% endblock %} </div> 

and css:

.nav-trigger:checked + label {     left: 215px; }  .nav-trigger:checked ~ .window {     background-color: transparent;     left: 200px;     box-shadow: 0 0 5px 5px rgba(0,0,0,0.5); } .nav-trigger + label, .window {     transition: left 0.2s; } 

the 1st , last css applied , label moves left current position, div .window not

the tilde '~' not parent selector (see question , answers) , there isn't parent selector in css (see question , answers.)

you'll need use javascript select parent element. jquery makes easy if you're using it.


Comments

Popular posts from this blog

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -