ハンバーガーメニュー メニュー分コンテンツが下がってしまう…

Question

ハンバーガーメニューを実装しています。
スマホでメニューを開くと、メニュー分コンテンツが下に下がってしまいます。
コンテンツの上にメニューを被せるにはどうしたら良いでしょうか？

（参考サイト）
https://haniwaman.com/responsive-menu/
*お手数ですが、↑サイトで「コンテンツに内容されたパターン」と「浮かせたパターン」をページ内検索して下さい。
（現状）コンテンツに内容されたパターン
（したい事）浮かせたパターン

【補足】header部分でハンバーガーメニューをクリックするとコンテンツが下にいきます。

<div id="container">から下でハンバーガーメニューをクリックすると理想の状態になります。 header部分から”浮かせたパターン”にしたいです。

ご教示よろしくお願い致します。

<div class="menu">
  <header class="site-header smp"><a href="/"><img src="logo.jpg"></a>
    <div class="nav_toggle">
      <div> <span></span> <span></span> <span></span> </div>
    </div>
  </header>
  <nav class="gnav">
    <ul>
      <li class="logo pc"><a href="/"><img src="logo.jpg"></a></li>
      <li><a href="#"></a></li>
      <li class="line2"></li>
      <li class="line2"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
</div>
<div id="container">
  <p class="smp"><img src="images/mainvisual.jpg" alt="" width="100%"></p>

//ナビゲーション固定
$(function() {
  var $win = $(window),
      $main = $('main'),
      $nav = $('.menu'),
      navHeight = $nav.outerHeight(),
      navPos = $nav.offset().top,
      fixedClass = 'is-fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > navPos ) {
      $nav.addClass(fixedClass);
      $main.css('margin-top', navHeight);
    } else {
      $nav.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
});

//メニュー
$(function(){
			$('.nav_toggle').click(function(){
						$("header").toggleClass('open');
				$(".gnav").slideToggle(500);
					});
$('.gnav a').on('click', function(){
        if (window.innerWidth <= 999) {
            $('.nav_toggle').click();
        }
    });
});

/*ナビゲーション*/
nav {
	width:100%;
	background:#10c1d4;
	margin-top:-3px;
	border-top:1px solid #ffffff;
}
nav ul {
	overflow:hidden;
	width:100%;
	margin:0 auto;
}
nav ul li {
	padding:30px 10px 10px 10px;
	color:#ffffff;
	font-weight:bold;
	text-align:center;
	width:100%;
	height:35px;
	border-bottom:1px solid #ffffff;
	line-height:1.5em;
}
nav ul li span {
	font-weight:normal;
}
nav ul li.logo {
	padding:15px 10px 10px 10px;
	height:50px;
}
.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
}
.nav_toggle {
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 15px;
	right:10px;
	z-index: 100;
	overflow:hidden;
}
.nav_toggle div {
	position: relative;
}
.nav_toggle span {
	display: block;
	height: 3px;
	background: #ffffff;
	position:absolute;
	width: 100%;
	left: 0;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}
 .nav_toggle span:nth-child(1) {
 top:0px;
}
 .nav_toggle span:nth-child(2) {
 top:12px;
}
 .nav_toggle span:nth-child(3) {
 top:24px;
}
	
	/*開閉ボタンopen時*/
	.open .nav_toggle span:nth-child(1) {
 top: 12px;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 transform: rotate(135deg);
}
 .open .nav_toggle span:nth-child(2) {
 width: 0;
 left: 50%;
}
 .open .nav_toggle span:nth-child(3) {
 top: 12px;
 -webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 transform: rotate(-135deg);
}
.gnav{
	display:none;
}

.pc{
display:none;
}
.smp{
display:block;
}

Comments

[yambejp]

参考ページ拝見しましたが

>（現状）コンテンツに内容されたパターン

の意味がわかりません。
現状左から縦長のメニューが挿入されてcloseかメニュー選択で
閉じますね？それを「コンテンツに内容されたパターン」と
表現しているのでしょうか？

>（したい事）浮かせたパターン

これもよくわかりません
他人のサイトでも良いので具体的な最終形を見られる
参考はありませんか？

[buuuu_chan]

ご連絡ありがとうございます。

↓こちらに載っています。
https://haniwaman.com/responsive-menu/
「コンテンツに内容されたパターン」と「浮かせたパターン」でページ内検索して頂けると、現状と最終形が載っています。

Answer 1

.gnav{
    display:none;
}

▲ この部分を以下のように修正 ▼

.gnav{
    display:none;
    position: relative;
}
.gnav ul {
    position: absolute;
    top: 0;
    left: 0;
}

これで動くと思いますが^^;

Answer 2

gnavクラスに

.gnav {
  display: none;
  position: absolute;
}

で、どうでしょうか