Navigation - offscreen

Navigation build for blog post.

by Phineusadrasteia

HTML

<div id="app">
  <nav id="simple_nav">
    <div class="logo_wrapper">
      <img src="http://via.placeholder.com/150x50" alt="" />
    </div>
    <ul>
      <li>
        <span>Home</span>
      </li>
      <li>
        <span>About</span>
      </li>
      <li>
        <span>Gallery</span>
      </li>
      <li>
        <span>Contact</span>
      </li>
    </ul>
  </nav>

  <div class="content">
    <article>
      <h1>Our website title - scroll down</h1>
      <section>
        <h2>Sub Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odit officiis officia aspernatur rem, molestiae at reprehenderit tempore culpa non nisi dolorum fugit iste atque ipsa maxime necessitatibus est ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, est consequatur. Repellendus eligendi nulla magnam repudiandae autem rerum cum ipsam dolorem minus at delectus nisi, nostrum voluptatum. Earum odit, dolor.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odit officiis officia aspernatur rem, molestiae at reprehenderit tempore culpa non nisi dolorum fugit iste atque ipsa maxime necessitatibus est ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, est consequatur. Repellendus eligendi nulla magnam repudiandae autem rerum cum ipsam dolorem minus at delectus nisi, nostrum voluptatum. Earum odit, dolor.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odit officiis officia aspernatur rem, molestiae at reprehenderit tempore culpa non nisi dolorum fugit iste atque ipsa maxime necessitatibus est ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, est consequatur. Repellendus eligendi nulla magnam repudiandae autem rerum cum ipsam dolorem minus at delectus nisi, nostrum voluptatum. Earum odit, dolor.</p>
      </section>
    </article>
  </div>
  
</div>

SCSS

body {
  margin: 0;
  font-size: 14px;
}

#simple_nav {
  position: fixed;
  display: flex;
  flex-direction: row;
  background: #fff;
  z-index: 1;
  width: 100%;
  border: 1px solid #ccc;
  padding: .5rem 0;
}

ul {
  list-style: none;
  display: flex;
  align-self: center;
  flex-grow: 3;
  padding-left: 0;
  justify-content: space-around;
  
  li {
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid #ccc;
    transition: background .2s;
    cursor: pointer;
    
    &:hover {
      background: #ccc;
    }
    &:active {
      background: #ccaaaa;
    }
  }
}

.logo_wrapper {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  
  img {
    align-self: center;
  }
}

h1 {
  font-weight: bold;
  font-size: 2rem;
}
h2 {
  font-weight: bold;
  font-size: 1.5rem;
}

.content {
  top: 5rem;
  position: relative;
  padding-top: 2rem;
  z-index: 0;
}