I have successfully created a navbar that toggles when a button is clicked. However, the button remains fixed in one position and I would like it to move along with the sliding navbar. How can I achieve this?
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("slow");
});
});.main_menu {
position: fixed;
top: 0;
background-color: #358ef3;
height: 9rem;
width: 100%;
}
.wideScreen {
margin-top: -0.625rem;
width: 4rem;
height: 1rem;
position: fixed;
top: 9rem;
left: 0;
}
.wideScreen>button {
width: 100%;
height: 100%;
}
.wideScreen>button>img {
width: 100%;
height: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_menu" id="panel">
<form class="" action="index.html" method="post">
<div class="slidecontainer">
<h2>Bac+: <span id="output"></span></h2>
<label for="myRange"></label><input type="range" min="1" max="8" value="0" class="slider" id="myRange">
</div>
</form>
</div>
<div class="wideScreen">
<button id="flip">
</button>
</div>