intra nave-bar with fixed header Pure CSS Solution

by Sheryl Hohman

HTML

<div class="flex center j-around nav fixed">
<a href="#a1">Anchor 1</a>
<a href="#a2">Anchor 2</a>
<a href="#a3">Anchor 3</a>
<a href="#a4">Anchor 4</a>
<a href="#a5">Anchor 5</a>
</div>
<!--<div style="margin-top:90px; padding:20px;"> -->
<div id="top" class="top" class="intro">
<!-- FYI text "hidden" by the header will be slightly visible, because the Header has a transparancy setting  -->  
some intro text
</div>
<!-- "name" attribute is NOT supported in HTML5 for anchor tags <a> -->
<div class="item">
  <a  id="a1"></a>
  <h2>Title block 1</h2>
  <p>some text 1</p>
</div>
<div class="item">
  <a id="a2"></a>
  <h2>Title block 2</h2>
  <p>some text 2</p>
</div>
<div class="item">
  <a  id="a3"></a>
  <h2>Title block 3</h2>
  <p>some text 3</p>
</div>
<div class="item">
  <a  id="a4"></a>
  <h2>Title block 4</h2>
  <p>some text 4</p>
</div>
<div class="item">
  <a id="a5"></a>
  <h2>Title block 5</h2>
  <p><a href="#top">back to top</a></p>
  <p>
  notice: that clicking this link, intro text won't line up proper because of (top) padding.
  I tried many methods to "fix" this.  
  However, any that "mostly" worked, ignored left padding (and possibly all padding)
  I tried creating an a tag, a separate "top" class, etc.
  Problem seems to be that it's an id. 
  Or maybe that all id's are set to "block" - maybe "some intro" should not be "block".
  </p>
</div>

CSS

/* the following "magic numbers" must be the same for this to work
 -- #top-of-page-content {
      margin-top:55px; 
    }
 -- <div style="margin-top: 55px>
 -- a[id] {
      padding-top: 55px;
      margin-top:  -55px;
    }
-- .fixed {
      height: 55px;
    }
*/
.fixed {
  height: 90px;       /*must match*/
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(125,125,0,0.9);
  box-shadow: 2px 2px 3px gray
}
#top {
  margin-top: 90px;     /*must match*/
  padding: 20px;
}
/* version2 */
a[id] {
    top: -90px;          /*must match, but -*/
    position: relative;
    display: block;
    visibility: hidden;
}
/* version1 ** /
a[id] {
  padding-top: 90px;     /*must match * /
  margin-top: -90px;     /*must match, but -* /
  display: block;
}
*/

.item {
  height: 500px;
  border:1px dashed green; 
}

html,body {
  padding: 0;margin: 0;
}
// flex css extends
// flex box mixins for cross-browser support // (just used for styling - works fine without these import statements)
//@import "https://gist.githubusercontent.com/MrSwed/c5bc6107caf324f72d12/raw/9c25f5f598a7e4093f101ff0cdb76c4a444c8209/flexbox.less";
//@import "https://gist.githubusercontent.com/MrSwed/c5bc6107caf324f72d12/raw/9c25f5f598a7e4093f101ff0cdb76c4a444c8209/flexbox-extend.less";