ハンバーガーメニューをレスポンシブデザインに適用させたい

前提・実現したいこと

スモールサイズでハンバーガーメニューにしている部分を
ナビゲーションとして横に並べたいです。

発生している問題・エラーメッセージ

現状PCサイズになった時に、ナビのリストが表示されません。
レスポンシブデザインにする場合、どのようにしたらいいのでしょうか。

HTML

<header> <h1><a href="index.html"><img src="images/logo.svg" alt="Magic" width="160" height="75" id="logo"></a></h1> <div class="hamburger"> <span></span> <span></span> <span></span> </div> <nav class="globalMenuSp"> <ul> <li><a class="btn-1" href="#">NEW</a></li> <li><a class="btn-2" href="#">LIMITED</a></li> <li><a class="btn-2" href="#">ITEM</a></li> <li><a class="btn-2" href="#">RANKING</a></li> <li><a class="btn-2" href="#">ATTENTION</a></li> <li><a class="btn-2" href="#">REVIEW</a></li> </ul> </nav> </header>

CSS

header{
position: fixed;
width: 100%;
height: 45px;
padding-top: 5px;
top: 0;
left: 0;
z-index: 2;
background: #E8AFE0;
}
/*　ハンバーガーボタン　*/
.hamburger {
display : block;
position: fixed;
z-index : 3;
right : 25px;
top : 5px;
width : 42px;
height: 42px;
cursor: pointer;
text-align: center;
-webkit-transition: 0.5s all;
-moz-transition : 0.5s all;
transition : 0.5s all;
}
.hamburger span {
display : block;
position: absolute;
width : 30px;
height : 2px ;
left : 6px;
background : #ffffff;
}
.hamburger span:nth-child(1) {
top: 10px;
}
.hamburger span:nth-child(2) {
top: 20px;
}
.hamburger span:nth-child(3) {
top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.hamburger.active span:nth-child(1) {
top : 16px;
left: 6px;
background : #fff;
-webkit-transform: rotate(-45deg);
-moz-transform : rotate(-45deg);
transform : rotate(-45deg);
}
.hamburger.active span:nth-child(2) {
top: 16px;
background : #fff;
-webkit-transform: rotate(45deg);
-moz-transform : rotate(45deg);
transform : rotate(45deg);
}
.hamburger.active span:nth-child(3) {
opacity: 0;
display: block;
}
nav.globalMenuSp {
position: fixed;
z-index : 2;
top : 50px;
left : 0;
color: #fff;
background: #e8afe0bf;
text-align: center;
width: 100%;
opacity: 0;
transition: opacity .6s ease, visibility .6s ease;
visibility: hidden;
}

nav.globalMenuSp ul {
margin: 0 auto;
padding: 0;
width: 100%;
}

nav.globalMenuSp ul li {
list-style-type: none;
padding: 0;
width: 100%;
transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
background : #5cc3ff9c;
}

nav.globalMenuSp ul li a {
display: block;
color: #fff;
padding: 1em 0;
text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
opacity: 100;
visibility: visible;
}

li a{
font-size: 18px;
}

@media screen and (min-width:769px){
h1{
margin-left: -60px;
}

logo{
max-height: 75px;
}

header{
width: 100%;
display: flex;
height: 80px;
text-align: left;
top: 0;
left: 0;
z-index: 2;
background: #E8AFE0;
}
.hamburger{
display: none;
}
}

Java

$(function() {
$('.hamburger').click(function() {
$(this).toggleClass('active');
$('.globalMenuSp').click();

	if ($(this).hasClass('active')) {
        $('.globalMenuSp').addClass('active');
    } else {
        $('.globalMenuSp').removeClass('active');
    }
	{
		$('.globalMenuSp').toggleClass('open');
	}
});

});

試したこと

色々調べましたが、何が問題なのかがわからず記載できることがありません･･･
申し訳ございません。
ヒントでもいいので、ご教示いただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず横並びで表示されるようにしてみました。

まず、opacity: 0; visibility: hidden;で非表示になっているので、それを上書きして表示させる。
nav.globalMenuSp > ulにdisplay: flex; を追加して、メニューを横並びにする。

align-items: center;で上下位置中央配置にする。

細かいレイアウトは不明なので、そちらで調整してください。

css
1@media screen and (min-width:769px){
2  h1{
3    margin-left: -60px;
4  }
5  logo{
6    max-height: 75px;
7  }
8
9  header{
10    width: 100%;
11    display: flex;
12    align-items: center;
13    height: 80px;
14    text-align: left;
15    top: 0;
16    left: 0;
17    z-index: 2;
18    background: #E8AFE0;
19  }
20  nav.globalMenuSp {
21    position: static;
22    opacity: 1;
23    visibility :visible;
24  }
25  nav.globalMenuSp > ul {
26    display: flex;
27    align-items: center;
28  }
29  .hamburger{
30    display: none;
31  }    
32}
33