title: Navigation Bar Height and Functionality
body: <p>So I'm looking at creating a navigation bar that'll sit at the top of my webpage and stick to it no matter where I scroll, but it always gets caught and disappears as I scroll away?</p>
  
  <p>Not only that, but this is what happens when I hover over it:</p>
  
  <p><img src="https://i.imgur.com/gndFWbm.png" alt="Nav-Bar"></p>
  
  <p>Is it possible to also only have the darker background fill the actual black bar it sits inside? </p>
  
  <p>This is the snippet from my style sheet as well:</p>
  
  <pre><code>body {
      background-color: #ecf0f1;
      margin: 0;
      font-family: Arial;
  }
  header {
      background-color: #333;
  }
  
  .navbar {
      height: 5%;
      overflow: auto;
      margin: auto;
      width: auto;
      min-height: 60px;
      top: 0;
      text-align: center;
  }
  
  .title {
      display: block;
  }
  
  .navbar ul {
      list-style-type: none;
      position: fixed;
      top: 0;
      padding: 0;
      overflow: hidden;
  }
  
  .navbar li {
      display: inline-block;
  }
  
  .navbar li a {
      padding: 25px;
      display: block;
      height: 100%;
      color: white;
      text-decoration: none;
  }
  
  /* Change the link color to #111 (black) on hover */
  .navbar li a:hover {
      background-color: #111;
  }
  </code></pre>
  
  <p>All help is greatly appreciated! First time playing around with CSS!</p>
  
  <p>EDIT:</p>
  
  <p>Here is the snippet of HTML that creates this header</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="style/style.css"&gt;
  
      &lt;header&gt;
          &lt;div class="navbar"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#news"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#contact"&gt;Contracts&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#about"&gt;Other&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  </code></pre>