ドロップダウンメニューとカルーセルでずれる

トップページがカルーセルで２つの画像がスライドしているのですが、
レスポンシブでスマホビューにした時に
ハンバーガーメニューをクリックすると上から降りてくるメニューが
カルーセルの内容を下に押しやってしまい、
しかもメニュー内容も右にズレたり、ロゴ位置も少しズレてしまうのですが、
なぜでしょうか？
Web初心者でわかりません。
どなたかお力を貸してください！(>_<)

###発生している問題・エラーメッセージ
■クリック前

■クリック後

###該当のソースコード

HTML

<head> <title>Top</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/main.css"/> <style> @import url(css/header_g-menu-pc.css) screen and (min-width: 769px); @import url(css/header_g-menu-smart.css) screen and (max-width: 768px);</style>  <link rel="stylesheet" type="text/css" href="slick4top/slick4top.css"> <link rel="stylesheet" type="text/css" href="slick4top/slick-theme4top.css"> <style type="text/css"> html, body { margin:0; padding:0; }

* {
  box-sizing: border-box;
}


.slick-slide {
  margin: 0px;
}

.slick-slide img {
  width: 100%;
  height: 100%;
  overflow-y:hidden;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}

</style> <section class="regular slider"> <div id="fullscreen"> <img src="images/LC_Top-cat.jpg"> </div> <div id="fullscreen"> <img src="images/LC_Top-walk.jpg"> </div> </section>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ var rwdMenu = $('#menuList'), switchPoint = 768, slideSpeed = 500;

var menuSouce = rwdMenu.html();

$(window).load(function(){

	function menuSet(){
		if(window.innerWidth <= switchPoint){
			if(!($('#rwdMenuWrap').length)){
				$('body').prepend('<div id="rwdMenuWrap"><div id="switchBtnArea">

<a href="javascript:void(0);" id="switchBtn"> <span></span><span></span><span></span></a></div></div>'); $('#rwdMenuWrap').append(menuSouce);

				var menuList = $('#rwdMenuWrap > ul');

				$('#switchBtn').on('click', function(){
					menuList.slideToggle(slideSpeed);
					$(this).toggleClass('btnClose');
				});
			}
		} else {
			$('#rwdMenuWrap').remove();
		}
	}

	$(window).on('resize', function(){
		menuSet();
	});

	menuSet();
});

});
</script>

MEDIAQUERIES[SP]LAYOUT
`
@media only screen and (max-width: 768px) {
#menuList {
display: none;
}

#rwdMenuWrap #switchBtnArea {
	width: 100%;
	height: 100px;
	background:white;
	position:fixed;
    z-index:100;
}

#rwdMenuWrap #switchBtnArea #switchBtn {
	top: 10px;
	left: 20px;
	width: 40px;
	height: 40px;
	display: block;
	background: white;
	position: absolute;
}

#rwdMenuWrap #switchBtnArea #switchBtn span {
	left: 0px;
	width: 75%;
	height: 2px;
	display: block;
	position: absolute;
	background-color: #b69178;;
	transition: all 0.2s linear;
}
#rwdMenuWrap #switchBtnArea #switchBtn 
 span:nth-of-type(1) {top:10px;transform: rotate(0);}
#rwdMenuWrap #switchBtnArea #switchBtn 
 span:nth-of-type(2) {top:20px;transform: scale(1);}
#rwdMenuWrap #switchBtnArea #switchBtn 
 span:nth-of-type(3) {bottom:8px;transform: rotate(0);}

#rwdMenuWrap #switchBtnArea #switchBtn.btnClose 
 span:nth-of-type(1) {top:20px;transform: rotate(-45deg);}
#rwdMenuWrap #switchBtnArea #switchBtn.btnClose 
 span:nth-of-type(2) {transform: scale(0);}
#rwdMenuWrap #switchBtnArea #switchBtn.btnClose 
 span:nth-of-type(3) {bottom:18px;transform: rotate(45deg);}

#rwdMenuWrap ul {
	width: 100%;
    height:100%;
	display: none;
}

#rwdMenuWrap ul li a {
    position: fixed;
    top:103px;
    font-size: 16px;
    padding:13px;
    font-weight: 100;
    font-family:'Ubuntu', sans-serif;
	text-align: center;
	display: block;
	background:rgba(255,255,255,0.90);
	position:relative;
    line-height: none;
    z-index:250;
    float:none;
}

#rwdMenuWrap ul li a:after {
	content: '';
	font-weight: bold;
	line-height: 1.2em;
	display: block;
	position:fixed;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

###試したこと
カルーセル部分にもz-indexを入れて下に置けばいいのかな？
と思ったのですが、それでもダメでした。

###補足情報(言語/FW/ツール等のバージョンなど)
カルーセルはslickを使ってます。

どうかご教授のほどよろしくお願いします！