Displaying content below a fixed header

Question

My page has a fixed header, I am aware that this causes content flows to begin at the top of the page. I've been searching for a workaround for this and nothing seems to be working, for example this one

Below is the code and here is a codepen - As you can see the content in my article is being displayed at the top of the page, although it is place at the bottom of my html.

I'd appreciate an explained workaround so that I can LEARN.

UPDATE - adding padding-top:{500px} successfully fixed this issue. Is this a recommended workaround? I was made aware of this fix here.

Thanks guys!

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.col-1 {
  width: 100%;
}

.inline-block-container>* {
  display: -moz-inline-stack;
  display: inline-block;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.wrapper {
  position: fixed;
  height: 100px;
  width: 100%;
  top: 0;
  z-index: 99;
}

.header {
  width: 100%;
  top: 0;
  border-bottom: 1px solid #ddd;
  background-color: white;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.header .logo a img {
  width: 150px;
  height: 49px;
}

.logo {
  margin-left: 40px;
}

.menu li {
  padding-right: 50px;
  margin-right: 20px;
}

.header .menu ul {
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
}

.header .menu ul li a {
  text-decoration: none;
  display: block;
  padding: 30px 20px;
}

.site-content {
  margin-top: 100px;
}

.banner-home {
  background: url("");
  height: 100vh;
  width: 100%;
  background-size: cover;
  position: absolute;
  z-index: -1000;
}

#intro {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: #020000;
  z-index: 50;
}

#intro a {
  border: 3px solid #020000;
  cursor: pointer;
}

#intro li a {
  padding: 20px;
  color: #020000;
  font-weight: 800;
}

#intro li a:hover {
  background-color: #ffd800;
}

<div id="page" class="rare-site">
  <div class="wrapper">
    <div id="global-navigation">
      <!-- Global Header -->
      <header class="header">
        <div class="logo">
          <a href="">
            <!--<img src="images/rare-logo.png">-->
            <h1>Rare Select</h1>
          </a>
        </div>
        <nav class="menu">
          <ul>
            <li><a href="">HOME</a></li>
            <!-- 
          -->
            <li>
              <div class="flexbox-container">
                <a href="">INFO</a>

            </li>
            <!--
          -->
            <li>
              <div class="flexbox-container">
                <a href="">NEWSLETTER</a>
              </div>
              <!--
          -->
              <li>
                <div class="flexbox-container">
                  <a href="">CONTACT</a>
              </li>
              <!--
          -->
          </ul>
      </header>
      </div>
      </div>
      <div id="content" class="site-content">
        <div id="primary" class="content-area">
          <!-- Content Area -->
          <main id="main" class="site-main" role="main">
            <div class="banner large-trunk">
              <div class="banner-home"></div>
              <div class="banner-overlay">
                <div id="intro">
                  <h2 class="discover"><u>The easy way to discover models.</u></h2>
                  <div id="button-container">
                    <div id="button-overlay">
                      <ul class="inline-block-container">
                        <li><a class="discover-1">I'm looking to become a model</a></li>
                        <li><a class="discover-2">I'm looking for a model</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <article id="newsletter">
              <div class="newsletter-entry">
                <section class="news-content trunk">
                  <div class="feature-box">
                    <h2>Recent News</h2>
                  </div>
                </section>
              </div>
            </article>
          </main>
        </div>
      </div>
    </div>

Kurbash

Since the margin-top: 100px already work how it is suppose to in your code sample, and also is the most used way to solve what you ask, how does it not work for you? – Denotation

Sorry I don't understand your question clearly. margin-top: 100px works on the first section of content after the fixed header, my question is concerning any content following this section – Kurbash

I see now I misunderstood the question, so all good. – Denotation

Answer 1

You already have a 100px header and a margin-top applied to site-content for the content following it, as is usually done.

1. A position: fixed header will be taken out of the flow. So the DOM element following it will overlap.

2. A z-index higher that the surrounding content is given so that it comes on top (which you have done giving wrapper a z-index: 99)

3. The content following it is given a margin-top value. If the height of the header is fixed (as is the case here) you give it using CSS, if the height of the header is dynamic, you might have to opt for javascript to set the height dynamically.

So restrict the heights of #global-navigation and .header using height: 100% and add display: flex to the navigation ul. Also remove the absolute positioning of the banner and apply background image to site-content- see demo below:

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.col-1 {
  width: 100%;
}

.inline-block-container>* {
  display: -moz-inline-stack;
  display: inline-block;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.wrapper {
  position: fixed;
  height: 100px;
  width: 100%;
  top: 0;
  z-index: 99;
}

#global-navigation { /* ADDED */
  height: 100%;
}

.header {
  height: 100%; /* ADDED */
  width: 100%;
  top: 0;
  border-bottom: 1px solid #ddd;
  background-color: white;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.header .logo a img {
  width: 150px;
  height: 49px;
}

.site-content { /* ADDED */
  background: url("http://placehold.it/50x50");
  height: 100vh;
  width: 100%;
  background-size: cover;
}

.logo {
  margin-left: 40px;
}

.menu li {
  padding-right: 50px;
  margin-right: 20px;
}

.header .menu ul {
  display: flex; /* ADDED */
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
}

.header .menu ul li a {
  text-decoration: none;
  display: block;
  padding: 30px 20px;
}

.site-content {
  margin-top: 100px;
}

.banner-home {} /* removed absolute positioning */

#intro { /* removed absolute positioning */
  width: 100%;
  text-align: center;
  color: #020000;
  z-index: 50;
}

#intro a {
  border: 3px solid #020000;
  cursor: pointer;
}

#intro li a {
  padding: 20px;
  color: #020000;
  font-weight: 800;
}

#intro li a:hover {
  background-color: #ffd800;
}

<div id="page" class="rare-site">
  <div class="wrapper">
    <div id="global-navigation">
      <!-- Global Header -->
      <header class="header">
        <div class="logo">
          <a href="">
            <!--<img src="images/rare-logo.png">-->
            <h1>Rare Select</h1>
          </a>
        </div>
        <nav class="menu">
          <ul>
            <li><a href="">HOME</a></li>
            <!-- 
          -->
            <li>
              <div class="flexbox-container">
                <a href="">INFO</a>
              </div>
            </li>
            <!--
          -->
            <li>
              <div class="flexbox-container">
                <a href="">NEWSLETTER</a>
              </div>
              <!--
          -->
              <li>
                <div class="flexbox-container">
                  <a href="">CONTACT</a>
                </div>
              </li>
              <!--
          -->
          </ul>
          </nav>
      </header>
      </div>
      </div>
      <div id="content" class="site-content">
        <div id="primary" class="content-area">
          <!-- Content Area -->
          <main id="main" class="site-main" role="main">
            <div class="banner large-trunk">
              <div class="banner-home"></div>
              <div class="banner-overlay">
                <div id="intro">
                  <h2 class="discover"><u>The easy way to discover models.</u></h2>
                  <div id="button-container">
                    <div id="button-overlay">
                      <ul class="inline-block-container">
                        <li><a class="discover-1">I'm looking to become a model</a></li>
                        <li><a class="discover-2">I'm looking for a model</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <article id="newsletter">
              <div class="newsletter-entry">
                <section class="news-content trunk">
                  <div class="feature-box">
                    <h2>Recent News</h2>
                  </div>
                </section>
              </div>
            </article>
          </main>
        </div>
      </div>
    </div>

Storekeeper

that isn't doing the trick unfortunately, however body:{padding-top:200px;} is moving the article content below, although I'm not sure how practical this is. – Kurbash

note that #intro is absolute position... why do you have it? that is why the banner goes above (as its translated too) and the article goes up... – Storekeeper

because #intro contains two buttons that overlay a background image. I included the bare bare bones of the code to this question – Kurbash

okay, so I'm confused... so could you please check out the snippet above (I've added a demo background to banner-home) and explain the issue pls? – Storekeeper

When your content changes, you may have to update the value of the padding - so not a general solution... what you can do is remove the absolute from #intro stretch the main to 100vh and add the background image to this... I'll make a demo now... – Storekeeper

This didn't work, most likely because I didn't display the FULL code for the site I'm working on..check the edit codepen link in my question, thats where I'm applying these changes – Kurbash

those are just images. By the way, I gave article a padding-top:{500px} which moved the content below. I then created another section element below the article and it displayed correctly without me having to add padding-top...I don't mind doing this as I have only 3 sections & a footer on this page. – Kurbash

Hey thanks a lot this works perfectly, it was 3am when I asked this question so that explains why I was having a hard time understanding your answer. – Kurbash