CSS fixed drop-down menu behaves weird

Question

Anybody understands why my drop-down menu behaves like this? (press on the hamburger to the right in the menu). Obviously, it's the positioning that's the problem somehow, however, I need it to be fixed in the top at the same time so I'm kinda out of options... If I have understood positioning correctly...

$('.hamburger').click(function(e){
		
		e.preventDefault();
	
		if ($("#menu").is(":visible")) {
		
			/* MENU FADES IN */
			$(".hamburger").removeClass('is-active');
			$("#menu").slideUp(400);
			
			$(".page-1-heading, .play-logo").fadeIn(500);
			$('.respm1, .respm2, .respm3, .respm4, .respm5, .respm6').toggleClass("animate");
			
		} else {
		
			/* MENU FADES OUT */
			$(".hamburger").addClass('is-active');
			$('.respm1, .respm2, .respm3, .respm4, .respm5, .respm6').toggleClass("animate");
			$("#menu").slideDown(400);
			
			$(".page-1-heading, .play-logo").fadeOut();
			
		}
	
	});

#responsive-menu {
		position: fixed;
		background-color: #000000;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
	}
.logo-2 {
		position: relative;
		float: left;
		top: 12px;
		left: 4%;
		z-index: 999;
		font-family: 'Helvetica-Neue', sans-serif;
		color:rgba(255,255,255,1);
		width: auto;
		height: 35px;
		
		transition: all 1s ease-out;
		-webkit-transition: all 1s ease-out;
	}
.hamburger {
	  position: relative;
	  float: right;
	  right: 5%;
	  z-index: 999;
	  opacity: 1;
	  cursor: pointer;
	  transition-property: opacity, filter;
	  transition-duration: 0.15s;
	  transition-timing-function: linear;
	  font: inherit;
	  color: inherit;
	  text-transform: none;
	  background-color: transparent;
	  border: 0;
	  overflow: visible; 
	  margin-bottom: 20px;
}
#menu {
		display: none;
		width: 100%;
		background-color: #f9f9f9;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#menu a {
		float: none;
		color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		text-align: left;
		z-index: 4;
		color: #333436;
		text-decoration: none;
		cursor: pointer;
		font-size: calc(13px + 0.3vw);
		text-transform: uppercase;
		letter-spacing: 3px;
		border-radius: 0.2em;
		-webkit-transition: 350ms ease all;
		-moz-transition: 350ms ease all;
		transition: 350ms ease all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="responsive-menu">
		<div id="wrapper">
			<div class="hamburger">
				<img src="http://goodstuffcommunications.com/wp-content/uploads/2015/08/xheadway-imported-image1.png.pagespeed.ic.rjlAN89gbj.png" class="logo-2" alt="Mountain View">
			</div>
			<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/HP_logo_630x630.png" class="logo-2" alt="Mountain View">
		</div>
			
		<!-- Menu content below -->
		<div id="menu">
			<a href="#">Services</a>
			<a href="#">Clients</a>
			<a href="#">About</a>
			<a href="#">Video</a>
			<a href="#">Contact</a>
		</div>
</div>

Answer 1

You have used float left and right for the logo and menu so only it occur like this. If you give clear:both to #menu it will fix

$('.hamburger').click(function(e){
		
		e.preventDefault();
	
		if ($("#menu").is(":visible")) {
		
			/* MENU FADES IN */
			$(".hamburger").removeClass('is-active');
			$("#menu").slideUp(400);
			
			$(".page-1-heading, .play-logo").fadeIn(500);
			$('.respm1, .respm2, .respm3, .respm4, .respm5, .respm6').toggleClass("animate");
			
		} else {
		
			/* MENU FADES OUT */
			$(".hamburger").addClass('is-active');
			$('.respm1, .respm2, .respm3, .respm4, .respm5, .respm6').toggleClass("animate");
			$("#menu").slideDown(400);
			
			$(".page-1-heading, .play-logo").fadeOut();
			
		}
	
	});

#responsive-menu {
		position: fixed;
		background-color: #000000;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
	}
.logo-2 {
		position: relative;
		float: left;
		top: 12px;
		left: 4%;
		z-index: 999;
		font-family: 'Helvetica-Neue', sans-serif;
		color:rgba(255,255,255,1);
		width: auto;
		height: 35px;
		
		transition: all 1s ease-out;
		-webkit-transition: all 1s ease-out;
	}
.hamburger {
	  position: relative;
	  float: right;
	  right: 5%;
	  z-index: 999;
	  opacity: 1;
	  cursor: pointer;
	  transition-property: opacity, filter;
	  transition-duration: 0.15s;
	  transition-timing-function: linear;
	  font: inherit;
	  color: inherit;
	  text-transform: none;
	  background-color: transparent;
	  border: 0;
	  overflow: visible; 
	  margin-bottom: 20px;
}
#menu {
        clear: both;
		display: none;
		width: 100%;
		background-color: #f9f9f9;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#menu a {
		float: none;
		color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		text-align: left;
		z-index: 4;
		color: #333436;
		text-decoration: none;
		cursor: pointer;
		font-size: calc(13px + 0.3vw);
		text-transform: uppercase;
		letter-spacing: 3px;
		border-radius: 0.2em;
		-webkit-transition: 350ms ease all;
		-moz-transition: 350ms ease all;
		transition: 350ms ease all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="responsive-menu">
		<div id="wrapper">
			<div class="hamburger">
				<img src="http://goodstuffcommunications.com/wp-content/uploads/2015/08/xheadway-imported-image1.png.pagespeed.ic.rjlAN89gbj.png" class="logo-2" alt="Mountain View">
			</div>
			<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/HP_logo_630x630.png" class="logo-2" alt="Mountain View">
		</div>
			
		<!-- Menu content below -->
		<div id="menu">
			<a href="#">Services</a>
			<a href="#">Clients</a>
			<a href="#">About</a>
			<a href="#">Video</a>
			<a href="#">Contact</a>
		</div>
</div>