9

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>
Jordan Miguel
  • 632
  • 1
  • 9
  • 34
  • 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? – Asons Oct 04 '17 at 08:02
  • 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 – Jordan Miguel Oct 04 '17 at 12:45
  • I see now I misunderstood the question, so all good. – Asons Oct 04 '17 at 12:53

1 Answers1

5

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>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • 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. – Jordan Miguel Oct 04 '17 at 01:39
  • 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... – kukkuz Oct 04 '17 at 01:42
  • because `#intro` contains two buttons that overlay a background image. I included the bare bare bones of the code to this question – Jordan Miguel Oct 04 '17 at 01:44
  • 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? – kukkuz Oct 04 '17 at 01:50
  • 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... – kukkuz Oct 04 '17 at 01:55
  • 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 – Jordan Miguel Oct 04 '17 at 02:09
  • 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. – Jordan Miguel Oct 04 '17 at 02:28
  • 1
    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. – Jordan Miguel Oct 04 '17 at 13:02