ハンバーガーメニューが戻らない

ハンバーガーメニューをクリックするとメニューが出てくるのですが、ばつ印を押せなくて戻りません。また、position:relative;を設定してかつheaderをfixedするのは可能なのでしょうか。以上２点良い方法を教えて頂きたいです。

html
1 <header class="header">
2          <div class="header-fixed">
3            <button type="button" id="js-buttonHamburger" class="c-button p-hamburger" aria-controls="global-nav" aria-expanded="false">
4              <span class="p-hamburger__line"></span>
5            </button>
6          </div> 
7            <div class="nav header-nav" id="nav" >
8              <ul class="nav-list">    
9                <li class="nav-item"><a href="#">About Me</a></li>
10                <li class="nav-item"><a href="#">Concept</a></li>
11                <li class="nav-item"><a href="#">Works</a></li>
12                <li class="nav-item"><a href="#">Service</a></li>
13              </ul>  
14            </div>
15        </header>
16

css
1.header {
2  background-color:black;
3  display: flex;
4  height: 94px;
5  width:100%;
6  position: relative;
7  z-index: 9999;
8}
9.nav-list{
10  list-style: none;
11  margin-top: 30px;
12}
13.nav-item a{
14  text-decoration: none;
15  color:white;
16  margin-right:40px;
17}
18.c-button {
19  position: relative;
20  display: inline-block;
21  text-decoration: none;
22  -webkit-appearance: none;
23  -moz-appearance: none;
24  appearance: none;
25  border: none;
26  background-color: transparent; 
27}  
28.p-hamburger {
29  position: absolute;
30  top: 0;
31  bottom: 0;
32  right: 20px;
33  width: 80px;
34  height: 80px;
35  margin: auto;
36  outline: none;
37  padding: 0 1em;
38  box-shadow: 0 0 2rem transparent;
39  -webkit-transition: all .3s ease-in-out;
40          transition: all .3s ease-in-out;  
41}
42.p-hamburger__line {
43  position: absolute;
44  top: 0;
45  right: 0;
46  bottom: 0;
47  left: 0;
48  margin: auto;
49  width: 80%;
50  height:3px;
51  background-color: white;
52  -webkit-transition: inherit;
53          transition: inherit;
54}
55.p-hamburger__line::before,
56.p-hamburger__line::after {
57  position: absolute;
58  display: block;
59  width: 100%;
60  height: 100%;
61  background-color: inherit;
62  content: '';
63  -webkit-transition: inherit;
64          transition: inherit;
65}
66.p-hamburger__line::before {
67  top: -5px;
68}
69.p-hamburger__line::after {
70  top: 5px;
71}
72.p-hamburger[aria-expanded="true"] .p-hamburger__line {
73  background-color: transparent;
74}
75.p-hamburger[aria-expanded="true"] .p-hamburger__line::before,
76.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
77  top: 0;
78  background-color: white;
79} 
80.p-hamburger[aria-expanded="true"] .p-hamburger__line::before {
81  -webkit-transform: rotate(45deg);
82  -ms-transform: rotate(45deg); 
83          transform: rotate(45deg);
84}
85.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
86  -webkit-transform: rotate(-45deg);
87  -ms-transform: rotate(-45deg);        
88  transform: rotate(-45deg);
89} 
90.header-nav{
91  position: fixed;
92  top: -100%;
93  width: 100%;
94  height: 50%;  
95  font-size: 16px;
96  box-sizing: border-box;
97  padding-top: 50px;
98  transition: .3s;
99  margin-left: auto;
100}
101
102
103.header-nav.open{
104  top: 0px;
105}
106.nav-list{
107  width: 100%;
108  height:100%;
109  display: flex;
110  flex-direction: column;
111  text-align: center;
112  margin: 0;
113  margin-top: 40px;
114  background-color: #000000CC; 
115  /*justify-content: center;*/
116}
117.nav-item{
118  display: block;
119  padding : 20px;
120}
121.nav-item a{
122  color: #ddd;
123  text-decoration: none;
124}

jquery
1$(function(){
2  $('#js-buttonHamburger').click(function () {
3    $('#nav').toggleClass('open');
4    $("#global-nav").slideToggle();
5      if ($('#js-buttonHamburger').attr('aria-expanded') == 'false') {
6        $('#js-buttonHamburger').attr('aria-expanded', true);
7      } else {
8        $('#js-buttonHamburger').attr('aria-expanded', false);
9      }
10    }); 
11});