title: HTML fixed header is changing position when page is refreshed
body: <p>I am working on this HTML code which has a fixed header. It works just fine until I refresh the page, it gets down to the current section. I tried many ways but could not figure out the problem. Does anyone have a solution for this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.subMenu {
   position:fixed;
   top:163px;
   height: 50px;
   z-index: 2000;
   width: 100%;
   border-top: 1px solid #C7E603;
   background: url(../images/nav-bg.png) repeat-x #80B404;
   box-shadow: 0px 1px 5px #1F1E20;
  }
  .subMenu .inner {
   padding: 0;
   font-weight: 400;
  }
  .subNavBtn {
   display: block;
   height: 35px;
   width: 9.48%;
   float: left;
   margin: 0px 0px 0 0;
   text-decoration: none;
   font-size: 14px;
   font-family: 'Coda', cursive;
   padding: 15px 2% 0 2%;
   text-align: center;
   color: #3C6B00;
   text-transform:uppercase;
   border-left: 2px ridge #8FDF00;
   background: url(../images/nav_li.png) 0 -100px repeat-x;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="subMenu"&gt;
    &lt;div class="wrap"&gt;
      &lt;div class="inner"&gt;
        &lt;div class="toolbar"&gt;
          &lt;ul&gt;
            &lt;li&gt; &lt;a href="#sTop" id="sTop" class="subNavBtn"&gt;Home&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a href="#s1" id="s1" class="subNavBtn"&gt;About&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a href="#s2" id="s2" class="subNavBtn"&gt;Facilities&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a href="#ss" id="ss" class="subNavBtn"&gt;Gallery&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a href="#s3" id="s3" class="subNavBtn"&gt;Events&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt;  &lt;a href="#s4" id="s4" class="subNavBtn"&gt;Services&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a href="s5" id="s5" class="subNavBtn"&gt;Contact&lt;/a&gt; &lt;/li&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>