title: Prevent floated right nav bar from moving when browser is resized
body: <p>I'm required to make sure my nav bar remains on the right of my header such that the user utilises the horizontal scroll bar to access the navigation options which aren't visible.</p>
  
  <p>Currently I've got 5 elements in my nested  and once the user resizes the browser the nav menu jumps/moves down.</p>
  
  <p><a href="https://jsfiddle.net/S5bKq/1274/" rel="nofollow">See fiddle here</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt; &lt;!-- Navigation menu bar --&gt;
      &lt;a href="#" id="logo"&gt;&lt;/a&gt;
  
      &lt;nav&gt;
          &lt;a href="#" id="menu-icon"&gt;&lt;/a&gt;
  
          &lt;ul&gt; &lt;!-- Navigation menu bar options. These are fixed in terms of content. --&gt;
              &lt;li&gt;&lt;a href="#"&gt;My Profile&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Log Out&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;FAQs&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contactus"&gt;Extras&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#contactus"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;          
          &lt;/ul&gt;
  
      &lt;/nav&gt;              
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>header {
      background-color: #3366FF;
      width: 100%;
      height: 86px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      opacity: 0.90%;
  }
  
  #logo {
      margin: 0px;
      float: left;
      width: 200px;
      height: 86px;
      background: url("../images/logo.png") no-repeat center;
  }
  
  nav {
      float: right;
      padding: 20px;
  }
  
  #menu-icon {
      display: hidden;
      width: 100px;
      height: 86px;
      background: url(http://www.w3newbie.com/wp-content/uploads/icon.png);
      padding: 0;
      margin: 0;
  }   
  
  a:hover#menu-icon {
      border-radius: 2px 2px 0 0;
  }
  
  ul {
      list-style: none;
  }
  
  nav ul li {
      text-align: center;
      display: inline-block;
      padding: 10px;
  }
  
  nav ul li a:hover {
      color: #363636;
      text-decoration: none;
  }
  </code></pre>