How to make an element not fixed?
Im currently working on header and I made a hamburger slide using javascript. The problem is when the bar slides to right , the title <h2> stays in his place. I hope there is a way to make it slide with the bar.
function show() { document.getElementById('sidebar').classList.toggle("active"); }header { background: #ff5f88e6; padding: 25px; overflow: hidden; } header h2 { margin-top: 0px; color: #fff; text-align: center; } #sidebar { position: absolute; height: 100%; width: 250px; padding: 24px 20px; left: -300px; top: 0 } .toggle-btn { left: 340px; top: 15px; position: absolute; } .toggle-btn span { width: 45px; height: 4px; background: #000; display: block; margin-top: 8px; } #sidebar.active { left: 0; transition-duration: 500ms; } #sidebar ul li { padding: 20px 24px; font-size: 25px; border-radius: 50px; }<header> <div id="sidebar"> <div class="toggle-btn" onclick="show()"> <span></span> <span></span> <span></span> </div> <div class="menu"> <ul> <li><a href="#">Category</a></li> <li><a href="#">Discusion</a></li> <li><a href="#">Quotes</a></li> <li><a href="#">Add Review</a></li> </ul> </div> <h2>"A Book can change the way you look"</h2> </header> </div> that’s what’s before clicking on the hamburger 
what happens after 
I want the title to slide right so the user can read it
An easy option is to add a class to the header element as well when you move the menu to move the h2 element as well.
Edit: I removed the active class from the sidebar and just created a css selector to change the menu based on the parent active class. This selector #header.active #sidebar
function show() { document.getElementById('header').classList.toggle("active"); }header { background: #ff5f88e6; padding: 10px; overflow: hidden; display:flex; justify-content:center; align-items: center; } #header.active h2{ margin-left: 300px; } header h2 { transition: 500ms all; margin: 0; padding: 0; color: #fff; text-align: center; } #sidebar { position: absolute; height: 100%; width: 250px; padding: 24px 20px; left: -300px; top: 0; transition: 500ms all; } .toggle-btn { left: 340px; top: 10px; position: absolute; } .toggle-btn span { width: 45px; height: 4px; background: #000; display: block; margin-top: 8px; } #header.active #sidebar { left: 0; } #sidebar ul li { padding: 20px 24px; font-size: 25px; border-radius: 50px; }<header id="header"> <div id="sidebar"> <div class="toggle-btn" onclick="show()"> <span></span> <span></span> <span></span> </div> <div class="menu"> <ul> <li><a href="#">Category</a></li> <li><a href="#">Discusion</a></li> <li><a href="#">Quotes</a></li> <li><a href="#">Add Review</a></li> </ul> </div> </div> <h2>"A Book can change the way you look"</h2> </header>
