Nav tag is hidden
<p>I am pretty new to web designing and upon doing some exercises, I encountered this problem: My <code>nav</code> tag was also hidden when I set header tag display to none. I tried adding <code>display:block</code> and <code>clear: display</code> to <code>nav</code> tag but did nothing. I read that <code>position: fixed</code> is hiding <code>nav</code> tag but as much as possible I do not want to remove it. I have not studied javascript yet, but let us say I did it with javascript, will the same problem occur or not? Please help me with this and suggest better ways to do it. Pardon my ignorance.</p>

<p>Here's my code for reference:</p>

<pre><code>#header{
    padding: 1.5px 0px;
    font-size: 30px;
    margin-top: -3%;
    margin-bottom: -4%;
    display: none;
} 

#nav{
    display: inline-block;
    text-align: right;
    position: fixed;
    background: red;
    width: 100%;
    height: auto;
    display: show;
}
</code></pre>