Search code examples
cssnavigationsticky

How to force the main part of a web page starting beneath a sticky navigation bar (CSS only)?

The webpage I want to make contains a sticky navigation bar and some divs with text on the rest of the page. I want to link from the navigation bar to another part of the page by adding a destination anchor at the title of the text div.

Doing this, I noticed that the top of my webpage is hidden behind the navigation bar. The result is that the title where I link too is also hidden.

HTML:

<nav class="main-nav">
  <ul class="main-nav__list">
    <li class="main-nav__list-item">
      <a href="#one">One</a>
    </li>
    <li class="main-nav__list-item">
      <a href="#two">Two</a>
    </li>
  </ul>
</nav>

SCSS:

.main-nav {
  position: fixed;
  width: 100vw;
  background-color: $colorGreenBlue;
  .main-nav__list {
    margin: 0;
    padding: 0;
  }
}

See http://codepen.io/elinehendrikse/pen/aJVMQo for more code.

I found out some options to handle this:

  1. Add 'padding-top: 50px' on the main part. On first sight this looks good but this does not solve the problem when I link to another part of the page.

  2. Use ':before' to add space above the div where I want to navigate to. The problem with this is that it visibly adds some space and that is not desirable.

  3. Add ':target { padding-top: 50px }' to the code. This seems like a workaround and is also not possible in the context I want to solve this problem (Wordpress).

So, how can I fix that the main part of the page always starts beneath the navigation bar? Is this possible with CSS only?

Thanks :-)

Solution

  • You can make the parent a flexbox column and set the bottom area to flex-grow: 1; overflow-y: scroll

    @import url("https://fonts.googleapis.com/css?family=Armata");
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-nav {
  background-color: #00c0ad;
}

.main-nav .main-nav__list {
  margin: 0;
  padding: 0;
}

.main-nav__list-item {
  position: relative;
  display: inline-block;
  background-color: #00c0ad;
  margin-right: -4px;
}

.main-nav__list-item a {
  display: block;
  text-decoration: none;
  font-family: "Armata";
  font-size: 1.5em;
  color: #FFFFFF;
  min-width: 150px;
  padding: 15px 5px 15px 15px;
}

.main-nav__list-item a:hover {
  background-color: #FFFFFF;
  color: #00c0ad;
  -webkit-box-shadow: inset 0px 0px 2px 0px #00c0ad;
  -moz-box-shadow: inset 0px 0px 2px 0px #00c0ad;
  box-shadow: inset 0px 0px 2px 0px #00c0ad;
}

.main-nav__symbol {
  float: right;
}

.dropdown {
  position: absolute;
  display: none;
  padding: 0;
}

ul .main-nav__list-item:hover .dropdown-vertical {
  display: block;
}

ul li ul .main-nav__list-item:hover .dropdown-horizontal {
  display: block;
  width: 100vw;
  top: 0;
  left: 100%;
}

.dropdown-horizontal li {
  float: left;
}

.dropdown-horizontal li a {
  width: 200px;
}

ul li ul li .main-nav__list-item:hover .dropdown-horizontal-vertical {
  display: block;
}

main {
  flex-grow: 1;
  overflow-y: scroll;
}

.section {
  clear: both;
  width: calc(50vw - 15px*2.5);
  margin: 15px 15px;
}

.section .section-header {
  font-family: "Armata";
  font-size: 1.5em;
}

.left {
  float: left;
}

.right {
  float: right;
}
    <nav class="main-nav">
  <ul class="main-nav__list">
    <li class="main-nav__list-item">
      <a href="#one">One</a>
    </li>
    <li class="main-nav__list-item">
      <a href="#two">Two</a>
    </li>
    <li class="main-nav__list-item">
      <a href="#">Three<span class="main-nav__symbol">&#9663;</span></a>
      <ul class="dropdown dropdown-vertical">
        <li class="main-nav__list-item">
          <a href="#ten">Ten</a></li>
        <li class="main-nav__list-item">
          <a href="#">Eleven</a>
        </li>
        <li class="main-nav__list-item">
          <a href="#">Twelve</a></li>
        <li class="main-nav__list-item">
          <a href="#">Thirteen<span class="main-nav__symbol">&#9657;</span></a>
          <ul class="dropdown dropdown-horizontal">
            <li class="main-nav__list-item">
              <a href="#">Twenty</a>
            </li>
            <li class="main-nav__list-item">
              <a href="#">Twenty-one<span class="main-nav__symbol">&#9663;</span></a>
              <ul class="dropdown dropdown-horizontal-vertical">
                <li class="main-nav__list-item">
                  <a href="#">Thirty</a></li>
                <li class="main-nav__list-item">
                  <a href="#">Thirty-one</a>
                </li>
              </ul>
              <!-- dropdown-horizontal-vertical -->
            </li>
          </ul>
          <!-- dropdown-horizontal -->
        </li>
      </ul>
      <!-- dropdown-vertical -->
    </li>
  </ul>
</nav>

<main>

  <div class="main">

    <div id="one" class="section left section-one">
      <h1 class="section-header">
    Section one
  </h1>
      <p class="">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in augue lorem. Suspendisse ullamcorper nisi lacus, fringilla venenatis turpis varius vitae. Aliquam nibh nunc, cursus sit amet sem non, hendrerit tincidunt nisi. Suspendisse ex est, molestie
        eget diam et, hendrerit semper nulla. Donec ex arcu, ornare nec nulla vitae, tincidunt luctus nibh. Nunc ut purus odio. Curabitur ornare scelerisque hendrerit. Vestibulum varius felis egestas aliquet porttitor. Donec sit amet ornare nisl. Aliquam
        vitae viverra ex. Pellentesque ac nisi sagittis, ultrices nisl nec, volutpat quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ultricies auctor iaculis. Integer finibus ornare eros, nec commodo
        nulla. Donec in turpis vel urna elementum dictum. Maecenas ut feugiat nulla. In hac habitasse platea dictumst. Sed posuere, felis non fringilla tempus, arcu nulla pellentesque nisi, nec varius enim ex vel enim. Sed a dolor sed erat vehicula sodales.
        Vivamus tempus sapien sit amet hendrerit tempor. Praesent diam nulla, molestie id ornare ac, varius in quam. Integer sit amet ultricies lectus. In scelerisque augue libero, at sodales tortor fringilla ut. Aenean pulvinar tortor id libero eleifend,
        non elementum mi pulvinar. Nullam efficitur felis laoreet molestie dignissim. Donec at sapien ac tortor venenatis tempus et eget ex. Sed vehicula elit id tellus suscipit auctor. Donec quis vestibulum est. Etiam vel fermentum lectus. Praesent laoreet
        tortor tortor, luctus condimentum enim auctor quis. Morbi vel tellus ac velit pharetra dignissim. Phasellus vestibulum risus eu lectus rutrum, eget dapibus ex semper. Phasellus nec ultrices libero. Proin fermentum eleifend nisi a vulputate. Ut
        lacinia volutpat purus, at feugiat lectus varius sit amet. Sed eget est vitae ante aliquet euismod. Aenean sit amet nisi nulla. Vestibulum pretium ex id velit vestibulum, quis ornare tortor tempor. Quisque et est vel leo egestas venenatis. Praesent
        nec velit pharetra, auctor orci et, imperdiet ipsum. Duis nec dui id mauris ultricies iaculis id et diam. Etiam vitae dolor eu libero dignissim lacinia. Nulla pulvinar odio at dapibus dignissim. Aenean mattis tellus a nunc tristique tincidunt.
        Donec ornare vehicula odio, vel mattis leo lacinia ac. Quisque auctor ac urna pellentesque placerat. Vestibulum ipsum lectus, tincidunt nec leo in, placerat sagittis magna.
      </p>
    </div>

    <div id="two" class="section right section-two">
      <h1 class="section-header">
    Section two
  </h1>
      <p class="">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in augue lorem. Suspendisse ullamcorper nisi lacus, fringilla venenatis turpis varius vitae. Aliquam nibh nunc, cursus sit amet sem non, hendrerit tincidunt nisi. Suspendisse ex est, molestie
        eget diam et, hendrerit semper nulla. Donec ex arcu, ornare nec nulla vitae, tincidunt luctus nibh. Nunc ut purus odio. Curabitur ornare scelerisque hendrerit. Vestibulum varius felis egestas aliquet porttitor. Donec sit amet ornare nisl. Aliquam
        vitae viverra ex. Pellentesque ac nisi sagittis, ultrices nisl nec, volutpat quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ultricies auctor iaculis. Integer finibus ornare eros, nec commodo
        nulla. Donec in turpis vel urna elementum dictum. Maecenas ut feugiat nulla. In hac habitasse platea dictumst. Sed posuere, felis non fringilla tempus, arcu nulla pellentesque nisi, nec varius enim ex vel enim. Sed a dolor sed erat vehicula sodales.
        Vivamus tempus sapien sit amet hendrerit tempor. Praesent diam nulla, molestie id ornare ac, varius in quam. Integer sit amet ultricies lectus. In scelerisque augue libero, at sodales tortor fringilla ut. Aenean pulvinar tortor id libero eleifend,
        non elementum mi pulvinar. Nullam efficitur felis laoreet molestie dignissim. Donec at sapien ac tortor venenatis tempus et eget ex. Sed vehicula elit id tellus suscipit auctor. Donec quis vestibulum est. Etiam vel fermentum lectus. Praesent laoreet
        tortor tortor, luctus condimentum enim auctor quis. Morbi vel tellus ac velit pharetra dignissim. Phasellus vestibulum risus eu lectus rutrum, eget dapibus ex semper. Phasellus nec ultrices libero. Proin fermentum eleifend nisi a vulputate. Ut
        lacinia volutpat purus, at feugiat lectus varius sit amet. Sed eget est vitae ante aliquet euismod. Aenean sit amet nisi nulla. Vestibulum pretium ex id velit vestibulum, quis ornare tortor tempor. Quisque et est vel leo egestas venenatis. Praesent
        nec velit pharetra, auctor orci et, imperdiet ipsum. Duis nec dui id mauris ultricies iaculis id et diam. Etiam vitae dolor eu libero dignissim lacinia. Nulla pulvinar odio at dapibus dignissim. Aenean mattis tellus a nunc tristique tincidunt.
        Donec ornare vehicula odio, vel mattis leo lacinia ac. Quisque auctor ac urna pellentesque placerat. Vestibulum ipsum lectus, tincidunt nec leo in, placerat sagittis magna.
      </p>
    </div>

    <div id="ten" class="section left section-ten">
      <h1 class="section-header">
    Section ten
  </h1>
      <p class="">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in augue lorem. Suspendisse ullamcorper nisi lacus, fringilla venenatis turpis varius vitae. Aliquam nibh nunc, cursus sit amet sem non, hendrerit tincidunt nisi. Suspendisse ex est, molestie
        eget diam et, hendrerit semper nulla. Donec ex arcu, ornare nec nulla vitae, tincidunt luctus nibh. Nunc ut purus odio. Curabitur ornare scelerisque hendrerit. Vestibulum varius felis egestas aliquet porttitor. Donec sit amet ornare nisl. Aliquam
        vitae viverra ex. Pellentesque ac nisi sagittis, ultrices nisl nec, volutpat quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ultricies auctor iaculis. Integer finibus ornare eros, nec commodo
        nulla. Donec in turpis vel urna elementum dictum. Maecenas ut feugiat nulla. In hac habitasse platea dictumst. Sed posuere, felis non fringilla tempus, arcu nulla pellentesque nisi, nec varius enim ex vel enim. Sed a dolor sed erat vehicula sodales.
        Vivamus tempus sapien sit amet hendrerit tempor. Praesent diam nulla, molestie id ornare ac, varius in quam. Integer sit amet ultricies lectus. In scelerisque augue libero, at sodales tortor fringilla ut. Aenean pulvinar tortor id libero eleifend,
        non elementum mi pulvinar. Nullam efficitur felis laoreet molestie dignissim. Donec at sapien ac tortor venenatis tempus et eget ex. Sed vehicula elit id tellus suscipit auctor. Donec quis vestibulum est. Etiam vel fermentum lectus. Praesent laoreet
        tortor tortor, luctus condimentum enim auctor quis. Morbi vel tellus ac velit pharetra dignissim. Phasellus vestibulum risus eu lectus rutrum, eget dapibus ex semper. Phasellus nec ultrices libero. Proin fermentum eleifend nisi a vulputate. Ut
        lacinia volutpat purus, at feugiat lectus varius sit amet. Sed eget est vitae ante aliquet euismod. Aenean sit amet nisi nulla. Vestibulum pretium ex id velit vestibulum, quis ornare tortor tempor. Quisque et est vel leo egestas venenatis. Praesent
        nec velit pharetra, auctor orci et, imperdiet ipsum. Duis nec dui id mauris ultricies iaculis id et diam. Etiam vitae dolor eu libero dignissim lacinia. Nulla pulvinar odio at dapibus dignissim. Aenean mattis tellus a nunc tristique tincidunt.
        Donec ornare vehicula odio, vel mattis leo lacinia ac. Quisque auctor ac urna pellentesque placerat. Vestibulum ipsum lectus, tincidunt nec leo in, placerat sagittis magna.
      </p>
    </div>

  </div>

</main>