title: Displaying the header content only when accessed
body: <p>I'm trying to think of a way how people can see the 
  header content only in a full screen display (no matter how big or small a user's browser screen size is) first before they
  start scrolling down the page. Here is what I mean.</p>
  
  <p><img src="https://i.stack.imgur.com/xMsH4.jpg" alt="enter image description here"></p>
  
  <p>I want people to see the top red bordered area only when they access the website. I dabbled with <code>vh</code> or <code>vw</code> but I'm not sure if that's the right way to handle this issue.</p>
  
  <pre><code>&lt;header class="header-wrapper"&gt;
          &lt;div class="logo"&gt;
            &lt;h3&gt;Idealogic&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="login"&gt;
            &lt;a href="#"&gt;&lt;p&gt;Log In&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="signup"&gt;
            &lt;a href="#"&gt;&lt;p&gt;Sign Up&lt;/p&gt;&lt;/a&gt;
        &lt;/header&gt;
  
        &lt;section&gt;
            &lt;h3 class="welcome"&gt;
              You Think. &lt;br /&gt;&lt;p class="indent"&gt;We Design.&lt;/p&gt;
            &lt;/h3&gt;
        &lt;/section&gt;
      &lt;/div&gt;
  
        &lt;!-- Nav Wrapper !--&gt;
        &lt;div class="nav-wrapper"&gt;
          &lt;nav&gt;
            &lt;ul&gt;
              &lt;a href="#"&gt;&lt;li&gt;Home&lt;/li&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;li&gt;How does it work?&lt;/li&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;li&gt;Pricing&lt;/li&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;li&gt;Education Discouts&lt;/li&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;li&gt;Contact Us&lt;/li&gt;&lt;/a&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;!-- Nav Wrapper Ends !--&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is the header html section. Should I wrap the entire header contents with a div class then go from there? I'm fairly new to the front-end development. Thank you so much for your help!</p>