Having some trouble with a transition effect involving multiple elements on a page. Specifically, I am working on a sliding side menu for the responsive top navigation menu. The goal is to have the relative body and a fixed header bar move to the right when the navigation toggle link is clicked.
While the transition of position right from 0 to 200px works smoothly when opening the navigation menu, the issue arises when closing it. The blue header bar instantly returns to right: 0px, while the transition on the red main content functions correctly. You can observe the word 'nav' move instantly before the rest of the content transitions in red. This discrepancy is more noticeable on the actual site I'm building compared to the fiddle linked below.
Check out this jsFiddle for reference:
$('.menu-toggle').click(function() {
$('body, .header-bar').toggleClass('menu-open');
return false;
});* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
background-color: #c00;
width: 100%;
margin: 0;
padding: 10px;
}
.menu-toggle {
color: white;
font-weight: bold;
cursor: pointer;
float: right;
position: relative;
right: 0;
}
.header-bar {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 15%;
background-color: #00c;
margin: 0;
padding: 15px;
}
.menu {
overflow-x: hidden;
position: relative;
right: 0;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
padding-top: 5px;
}
.menu-open {
right: 200px;
}
.menu-open .menu-side {
right: 0;
}
.menu-side {
background-color: #333;
border-right: 1px solid #000;
position: fixed;
top: 0;
right: -200px;
width: 200px;
height: 100%;
padding: 10px;
}
.menu,
.menu-open,
.menu-side {
-webkit-transition: right 0.2s ease;
}
.logo {
width: 250px;
height: 100px;
color: white;
font-weight: bold;
font-size: 36px;
float: left;
position: relative;
}
.menu-side ul {
list-style: none;
padding-left: 0;
margin: 0
}
.menu-side ul li a {
color: #eee;
text-decoration: none;
}
.menu-side ul li a:hover {
text-decoration: underline;
}<header>
<div class="header-bar">
<div class="logo">MWP</div>
<div class="menu-toggle">Nav</div>
<nav class="menu-side">
<ul>
<li><a href="#about-me">About Me</a>
</li>
<li><a href="#my-work">My Work</a>
</li>
<li><a href="#testimonials">Testimonials</a>
</li>
<li><a href="#contact-me">Contact Me</a>
</li>
</ul>
</nav>
</div>
<!-- omitted content filler was here - found in jFiddle -->
</header>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>I've double-checked my CSS multiple times and confirmed that the jQuery is adding/removing the necessary classes. However, I can't seem to identify what I've done wrong. I need the blue bar to remain fixed in position.