Disappearing mobile navbar in wordpress - html

Question

My wordpress website (mustafasprojects.com) is missing its mobile navbar when I pull it up in wordpress. It is there in the html file when I inspect it but I cannot get the same navbar to appear in wordpress. as far as my html code it's the standard navbar stuff.
<header id="header">
<h1>Mustafa's Projects</h1>
<nav id="nav">
<ul>
<li>Home</li>
<li>My Work</li>
</ul>
</nav>
</header>
#header {
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
height: 3em;
line-height: 3em;
box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1);
animation: 1s ease-out 0s 1 SlideInFromTop;
}
#header h1 {
height: 3em;
left: 1em;
line-height: 3em;
margin: 0;
padding: 0;
position: absolute;
top: -.225em;
font-size: 1.2em;
}
#header h1 a {
color: #000
font-size: 1.1em;
border: 0;
}
#header nav {
position: absolute;
right: 0.5em;
top: .525em;
height: 1em;
line-height: 1em;
vertical-align: middle;
}
#header nav ul {
margin: 0;
}
#header nav ul li {
display: inline-block;
margin-left: 0.5em;
font-size: 0.95em;
}
#header nav > ul > li a {
display: inline-block;
height: 1.7em;
line-height: 1.7em;
padding: 0 .3em;
border-radius: 6px;
}
#header nav > ul > li a:not(.button) {
color: #000;
display: inline-block;
text-decoration: none;
border: 0;
}
#header nav > ul > li a:not(.button).icon:before {
color: #999;
margin-right: 0.5em;
}
#header nav > ul > li a:hover:not(.active) {
background-color: #266dd3;
}
#header nav > ul > li:first-child {
margin-left: 0;
}
#header nav > ul > li.active a:not(.button) {
background-color: rgba(153, 153, 153, 0.25);
}
#header nav > ul > li .button {
margin: 0 0 0 0.5em;
position: relative;
}
#media screen and (max-width: 736px) {
#header {
height: 2.5em;
line-height: 2.5em;
}
#header h1 {
text-align: center;
position: relative;
left: 0;
top: 0;
height: 2.5em;
line-height: 2.5em;
}
#header h1 a {
font-size: 1em;
}
#header nav {
display: none;
}
}
.header.onload-header-fade-down {
transform: 0.75s ease-in-out;
transition: opacity .75s ease-in-out, transform .75s ease-in-out;
}
So yeah if anyone can help me solve the case of the missing navbar it would be much appreciated. It doesn't appear in the tablet or mobile view on wordpress but it appears in the tablet/mobile view on the inspector btw.
Thanks

Answer 1

You are hiding the header at screen widths smaller than 840px:
#media screen and (max-width: 840px)
#header {
display: none;
}
on line 2906 of your html file.
Actually, something really bad is going on, as you have a duplicate <header id="header"> element.

Answer 2

If you look at your Media query, you're hiding the nav bar in any screen size under 736px.
#media screen and (max-width: 736px) {
#header nav {
display: none;
}
}
If you remove that, you will then see your nav bar. Depending on what the rest of your code looks like, you will either have to >
1) Remove the whole #header nav line from your max-width query
or
2) Change it to display:block.
I am not sure what the rest of your code looks like or what your trying to accomplish, but either of those will work.