Positioning scrollable content under fixed flexbox navigation menu

Question

I have the following snippet (need to view in full screen mode), that I'm trying to place the <main> element directly under the <header> element. I have the <header> in a fixed position because I want it to stay at the top of the screen as the user scrolls through the content in the <main> element. I've tried everything I know, but the best I can come up with is having the <header> element placed on top of the <main> element, which cuts off a big chunk of the content.

The closest possible solution I've come up with is putting a guesstimated top padding on the <main> element so it will clear the <header>. However, this solution doesn't account for various screen sizes very well, since I'm using rem sizing instead of px. The top padding idea gets even worse when placing several elements inside the <header> that use relative or percentage based height. On one screen size everything may line up perfect, and on a different screen size the content can be way off.

Lastly, I know I can use jQuery to set the top padding dynamically, but it doesn't always seem to work that well. Wondering is there's a pure css/html solution.

Can anyone tell me what I'm missing here? Is my top padding method the only workable solution?

$(document).ready(function() {
  $('#navToggle').click(function() {
    $("div#bottom-container > nav").slideToggle();
  });

  $(window).resize(function() {
      if(window.innerWidth >= "751") {
          $("header > div#bottom-container > nav").show();
      }else {
          $("header > div#bottom-container > nav").hide();
      }
  });

  $("header > div#bottom-container > nav > ul > li > a").click(function(e) {
     if (window.innerWidth <= "750") {
       if ($(this).siblings().size() > 0) {
         e.preventDefault();
         $(this).siblings().slideToggle("slow");
      }
    }
  });

   $("header > div#bottom-container > nav > ul > li").hover(function() {
        if (window.innerWidth >= "751") {
          if ($(this).children("nav").size() > 0) {
            $(this).children("nav").stop().show();
         }
       }
     },function(){
       if (window.innerWidth >= "751") {
         if ($(this).children("nav").size() > 0) {
           $(this).children("nav").hide();
        }
      }
  });
});

* {
  margin: 0;
}

@media (min-width: 48rem) {
  :root {
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
  }
}

body {
  background: #eee;
  font-family: "HelveticaNeue-Light", Arial;
  height: auto !important;
}

#head-wrap{
    margin: 0 auto;
    position: relative;
    width:100%;
}
#second-wrap{
    position: fixed;
    width:100%;
    z-index:999;
}
main{
  height:4000px;
  position:relative;
  padding-top:13rem;
}

header{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  overflow-x: hidden;
  overflow-y: auto;
  height:200rem;
}

#navToggle {
  background-color: rgba(0, 0, 0, .15);
  position: relative;
  right: 0;
  top: 0;
  z-index:999;
  height: 2.6rem;
}

#navToggle>a {
  color: rgba(255, 255, 255, .85);
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0 2.5rem;
  text-decoration: none;
  transition: all 300ms ease;
  padding-top:.9rem;
}

#bottom-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

#bottom-container>nav {
  background-color: rgb(250, 209, 14);
  display: none;
  flex: 1;
}

#bottom-container nav>ul {
  list-style-type: none;
}

#bottom-container nav>ul>li {
  position: relative;
}

#bottom-container nav>ul>li>a {
  display: block;
  color: rgba(0, 0, 0, .65);
  padding: 1.3rem 0;
  text-decoration: none;
}

#bottom-container nav>ul>li>a span.toggle {
  background-color: rgba(0, 0, 0, .05);
  color: rgba(0, 0, 0, .25);
  padding: 2px 8px;
}

#bottom-container>nav>ul>li>nav {
  display: none;
  overflow: hidden;
  position: absolute;
  top:100%;
  right: 5%;
  width: 90%;
  z-index: 100;
  background-color: rgb(250, 250, 250);
  margin-bottom:10rem;
}

header>nav>ul>li>nav>ul>li>a {
  color: rgba(255, 255, 255, .85);
}

/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
////   THIS IS THE ONLY FIX I KNOW OF  //////////
*/
main{
  padding-top:5rem;
}
/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/

/* Medium screens */
@media all and (min-width: 751px) {
  header{
    overflow-y:visible;
    overflow-x:visible;
    padding-bottom:0;
  }

  #navToggle {
    display: none;
  }

  #bottom-container {
    background-color: rgb(250, 209, 14);
    width: 100%;
    border-top: calc(5vh + 2vw) solid yellow;
  }

  #bottom-container>nav {
    display: block;
  }

  #bottom-container>nav>ul {
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 3rem;
  }

  #bottom-container nav>ul>li {
    position: static;
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #bottom-container nav>ul>li>a {
   padding: 0;
  }

  #bottom-container nav>ul>li>a span.toggle {
    display: none;
  }

  #bottom-container >nav>ul>li>nav>ul>li{
    line-height: 2.5rem;
  }
  #bottom-container>nav>ul>li>nav {
    margin-top:-194.5rem;
  }
}

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="head-wrap">
  <div id="second-wrap">
    <header>
      <div id="navToggle"><a href="#">Menu</a></div>
      <div id='bottom-container'>
        <nav>
          <ul>
            <li><a href="#">ITEM ONE</a></li>
            <li class="sub1">
              <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
            <nav>
              <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
              </ul>
            </nav>
            <li><a href="#">ITEM THREE</a></li>
          </ul>
        </nav>
      </div>
    </header>
  </div>
</div>

<main>
  <p>content top not visible but should be able to see</P>
  <p>line 1</P>
  <p>line 2</P>
  <p>line 3</P>
  <p>line 4</P>
  <p>line 5</P>
  <p>line 6</P>
  <p>line 7</P>
  <p>line 8</P>
  <p>line 9</P>
  <p>line 10</P>
    <p>line 11</P>
    <p>line 12</P>
    <p>line 13</P>
    <p>line 14</P>
    <p>line 15</P>
    <p>line 16</P>
    <p>line 17</P>
    <p>line 18</P>
    <p>line 19</P>
    <p>line 20</P>
</main>
</body>
</html>

Rise · Accepted Answer

Please remove first top two div containers of header element as there is no need to wrap header. header element is already container.

Please remove height:200rem; in header style and padding-top: 13rem or 5rem for main element's style.

Finally, please update header style's position property to sticky instead of absolute and add z-index.

Below, I have tested it and updated codebase.

$(document).ready(function() {
  $('#navToggle').click(function() {
    $("div#bottom-container > nav").slideToggle();
  });

  $(window).resize(function() {
      if(window.innerWidth >= "751") {
          $("header > div#bottom-container > nav").show();
      }else {
          $("header > div#bottom-container > nav").hide();
      }
  });

  $("header > div#bottom-container > nav > ul > li > a").click(function(e) {
     if (window.innerWidth <= "750") {
       if ($(this).siblings().size() > 0) {
         e.preventDefault();
         $(this).siblings().slideToggle("slow");
      }
    }
  });

   $("header > div#bottom-container > nav > ul > li").hover(function() {
        if (window.innerWidth >= "751") {
          if ($(this).children("nav").size() > 0) {
            $(this).children("nav").stop().show();
         }
       }
     },function(){
       if (window.innerWidth >= "751") {
         if ($(this).children("nav").size() > 0) {
           $(this).children("nav").hide();
        }
      }
  });
});

* {
  margin: 0;
}

@media (min-width: 48rem) {
  :root {
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
  }
}

body {
  background: #eee;
  font-family: "HelveticaNeue-Light", Arial;
  height: auto !important;
}

main{
  height:4000px;
  position:relative;
}

header{
  position: sticky;
  z-index: 100;
  top:0;
  left:0;
  width:100%;
}

#navToggle {
  background-color: rgba(0, 0, 0, .15);
  position: relative;
  right: 0;
  top: 0;
  z-index:999;
  height: 2.6rem;
}

#navToggle>a {
  color: rgba(255, 255, 255, .85);
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0 2.5rem;
  text-decoration: none;
  transition: all 300ms ease;
  padding-top:.9rem;
}

#bottom-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

#bottom-container>nav {
  background-color: rgb(250, 209, 14);
  display: none;
  flex: 1;
}

#bottom-container nav>ul {
  list-style-type: none;
}

#bottom-container nav>ul>li {
  position: relative;
}

#bottom-container nav>ul>li>a {
  display: block;
  color: rgba(0, 0, 0, .65);
  padding: 1.3rem 0;
  text-decoration: none;
}

#bottom-container nav>ul>li>a span.toggle {
  background-color: rgba(0, 0, 0, .05);
  color: rgba(0, 0, 0, .25);
  padding: 2px 8px;
}

#bottom-container>nav>ul>li>nav {
  display: none;
  overflow: hidden;
  position: absolute;
  top:100%;
  right: 5%;
  width: 90%;
  z-index: 100;
  background-color: rgb(250, 250, 250);
  margin-bottom:10rem;
}

header>nav>ul>li>nav>ul>li>a {
  color: rgba(255, 255, 255, .85);
}

/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
////   THIS IS THE ONLY FIX I KNOW OF  //////////
*/
main{
  /* remove padding top */
}
/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/

/* Medium screens */
@media all and (min-width: 751px) {
  header{
    overflow-y:visible;
    overflow-x:visible;
    padding-bottom:0;
  }

  #navToggle {
    display: none;
  }

  #bottom-container {
    background-color: rgb(250, 209, 14);
    width: 100%;
    border-top: calc(5vh + 2vw) solid yellow;
  }

  #bottom-container>nav {
    display: block;
  }

  #bottom-container>nav>ul {
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 3rem;
  }

  #bottom-container nav>ul>li {
    position: static;
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #bottom-container nav>ul>li>a {
   padding: 0;
  }

  #bottom-container nav>ul>li>a span.toggle {
    display: none;
  }

  #bottom-container >nav>ul>li>nav>ul>li{
    line-height: 2.5rem;
  }
  #bottom-container>nav>ul>li>nav {
    margin-top:-194.5rem;
  }

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

  <header>
    <div id="navToggle"><a href="#">Menu</a></div>
    <div id='bottom-container'>
      <nav>
        <ul>
          <li><a href="#">ITEM ONE</a></li>
          <li class="sub1">
            <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
          <nav>
            <ul>
              <li><a href="#">Sub Item 1</a></li>
              <li><a href="#">Sub Item 2</a></li>
              <li><a href="#">Sub Item 3</a></li>
              <li><a href="#">Sub Item 4</a></li>
            </ul>
          </nav>
          <li><a href="#">ITEM THREE</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <p>content top not visible but should be able to see</P>
    <p>line 1</P>
    <p>line 2</P>
    <p>line 3</P>
    <p>line 4</P>
    <p>line 5</P>
    <p>line 6</P>
    <p>line 7</P>
    <p>line 8</P>
    <p>line 9</P>
    <p>line 10</P>
      <p>line 11</P>
      <p>line 12</P>
      <p>line 13</P>
      <p>line 14</P>
      <p>line 15</P>
      <p>line 16</P>
      <p>line 17</P>
      <p>line 18</P>
      <p>line 19</P>
      <p>line 20</P>
  </main>
</body>
</html>
 Run code snippet

thingEvery · Answer

This is sort of a rough hack, but you could create a second header which hides behind the real one which stays in the document flow and pushes down the <main>.

Just duplicate the elements that make up the header, give them a lower z-index and switch it from position: fixed to position: relative. Then just get rid of the height of the hidden <header> element and remove the padding-top from <main>.

$(document).ready(function() {
  $('#navToggle').click(function() {
    $("div#bottom-container > nav").slideToggle();
  });

  $(window).resize(function() {
      if(window.innerWidth >= "751") {
          $("header > div#bottom-container > nav").show();
      }else {
          $("header > div#bottom-container > nav").hide();
      }
  });

  $("header > div#bottom-container > nav > ul > li > a").click(function(e) {
     if (window.innerWidth <= "750") {
       if ($(this).siblings().size() > 0) {
         e.preventDefault();
         $(this).siblings().slideToggle("slow");
      }
    }
  });

   $("header > div#bottom-container > nav > ul > li").hover(function() {
        if (window.innerWidth >= "751") {
          if ($(this).children("nav").size() > 0) {
            $(this).children("nav").stop().show();
         }
       }
     },function(){
       if (window.innerWidth >= "751") {
         if ($(this).children("nav").size() > 0) {
           $(this).children("nav").hide();
        }
      }
  });
});

* {
  margin: 0;
}

@media (min-width: 48rem) {
  :root {
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
  }
}

body {
  background: #eee;
  font-family: "HelveticaNeue-Light", Arial;
  height: auto !important;
}

#head-wrap,
#hidden-wrap{
    margin: 0 auto;
    position: relative;
    width:100%;
}
#hidden-wrap header {
  height: inherit;
  position: relative;
}
#second-wrap{
    position: fixed;
    width:100%;
    z-index:999;
}
#second-wrap2{
    position: relative;
    width:100%;
    z-index:998;
}

main{
  height:4000px;
  position:relative;
  /* padding-top:13rem; */
}

header{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  overflow-x: hidden;
  overflow-y: auto;
  height:200rem;
}

#navToggle,
#navToggle2{
  background-color: rgba(0, 0, 0, .15);
  position: relative;
  right: 0;
  top: 0;
  z-index:999;
  height: 2.6rem;
}

#navToggle>a,
#navToggle2>a{
  color: rgba(255, 255, 255, .85);
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0 2.5rem;
  text-decoration: none;
  transition: all 300ms ease;
  padding-top:.9rem;
}

#bottom-container,
#bottom-container2{
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

#bottom-container>nav,
#bottom-container2>nav{
  background-color: rgb(250, 209, 14);
  display: none;
  flex: 1;
}

#bottom-container nav>ul,
#bottom-container2 nav>ul{
  list-style-type: none;
}

#bottom-container nav>ul>li,
#bottom-container2 nav>ul>li{
  position: relative;
}

#bottom-container nav>ul>li>a,
#bottom-container2 nav>ul>li>a{
  display: block;
  color: rgba(0, 0, 0, .65);
  padding: 1.3rem 0;
  text-decoration: none;
}

#bottom-container nav>ul>li>a span.toggle,
#bottom-container2 nav>ul>li>a span.toggle{
  background-color: rgba(0, 0, 0, .05);
  color: rgba(0, 0, 0, .25);
  padding: 2px 8px;
}

#bottom-container>nav>ul>li>nav,
#bottom-container2>nav>ul>li>nav{
  display: none;
  overflow: hidden;
  position: absolute;
  top:100%;
  right: 5%;
  width: 90%;
  z-index: 100;
  background-color: rgb(250, 250, 250);
  margin-bottom:10rem;
}

header>nav>ul>li>nav>ul>li>a {
  color: rgba(255, 255, 255, .85);
}

/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
////   THIS IS THE ONLY FIX I KNOW OF  //////////
*/
main{
  /*padding-top:5rem;*/
}
/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/

/* Medium screens */
@media all and (min-width: 751px) {
  header{
    overflow-y:visible;
    overflow-x:visible;
    padding-bottom:0;
  }

  #navToggle,
  #navToggle2{
    display: none;
  }

  #bottom-container,
  #bottom-container2{
    background-color: rgb(250, 209, 14);
    width: 100%;
    border-top: calc(5vh + 2vw) solid yellow;
  }

  #bottom-container>nav,
  #bottom-container2>nav{
    display: block;
  }

  #bottom-container>nav>ul,
  #bottom-container2>nav>ul{
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 3rem;
  }

  #bottom-container nav>ul>li,
  #bottom-container2 nav>ul>li{
    position: static;
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #bottom-container nav>ul>li>a,
  #bottom-container2 nav>ul>li>a{
   padding: 0;
  }

  #bottom-container nav>ul>li>a span.toggle,
  #bottom-container2 nav>ul>li>a span.toggle{
    display: none;
  }

  #bottom-container >nav>ul>li>nav>ul>li,
  #bottom-container2 >nav>ul>li>nav>ul>li{
    line-height: 2.5rem;
  }
  #bottom-container>nav>ul>li>nav,
  #bottom-container2>nav>ul>li>nav{
    margin-top:-194.5rem;
  }
}

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="head-wrap">
  <div id="second-wrap">
    <header>
      <div id="navToggle"><a href="#">Menu</a></div>
      <div id='bottom-container'>
        <nav>
          <ul>
            <li><a href="#">ITEM ONE</a></li>
            <li class="sub1">
              <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
            <nav>
              <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
              </ul>
            </nav>
            <li><a href="#">ITEM THREE</a></li>
          </ul>
        </nav>
      </div>
    </header>
  </div>
</div>
<div id="hidden-wrap">
  <div id="second-wrap2">
    <header>
      <div id="navToggle2"><a href="#">Menu</a></div>
      <div id='bottom-container2'>
        <nav>
          <ul>
            <li><a href="#">ITEM ONE</a></li>
            <li class="sub1">
              <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
            <nav>
              <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
              </ul>
            </nav>
            <li><a href="#">ITEM THREE</a></li>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  </div>
</div>

<main>
  <p>now you can see this text</p>
  <p>line 1</p>
  <p>line 2</p>
  <p>line 3</p>
  <p>line 4</p>
  <p>line 5</p>
  <p>line 6</p>
  <p>line 7</p>
  <p>line 8</p>
  <p>line 9</p>
  <p>line 10</p>
    <p>line 11</p>
    <p>line 12</p>
    <p>line 13</p>
    <p>line 14</p>
    <p>line 15</p>
    <p>line 16</p>
    <p>line 17</p>
    <p>line 18</p>
    <p>line 19</p>
    <p>line 20</p>
</main>
</body>
</html>

Edit: I don't know why I didn't think of this before. Just set #headwrap and <main> to position: relative. Then, remove the height on <main> and set <body> to display: flex and flex-direction: column. Finally, wrap the contents of <main> in a <div>.

Here, I've set the height of the div to 4000px to demonstrate the scrolling.

$(document).ready(function() {
  $('#navToggle').click(function() {
    $("div#bottom-container > nav").slideToggle();
  });

  $(window).resize(function() {
      if(window.innerWidth >= "751") {
          $("header > div#bottom-container > nav").show();
      }else {
          $("header > div#bottom-container > nav").hide();
      }
  });

  $("header > div#bottom-container > nav > ul > li > a").click(function(e) {
     if (window.innerWidth <= "750") {
       if ($(this).siblings().size() > 0) {
         e.preventDefault();
         $(this).siblings().slideToggle("slow");
      }
    }
  });

   $("header > div#bottom-container > nav > ul > li").hover(function() {
        if (window.innerWidth >= "751") {
          if ($(this).children("nav").size() > 0) {
            $(this).children("nav").stop().show();
         }
       }
     },function(){
       if (window.innerWidth >= "751") {
         if ($(this).children("nav").size() > 0) {
           $(this).children("nav").hide();
        }
      }
  });
});

* {
  margin: 0;
}

@media (min-width: 48rem) {
  :root {
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
  }
}

body {
  background: #eee;
  font-family: "HelveticaNeue-Light", Arial;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#head-wrap{
    margin: 0 auto;
    position: relative;
    width:100%;
}

#second-wrap{
    position: relative;
    width:100%;
    z-index:999;
}

main{
  /*height:4000px;*/
  position:relative;
  overflow: auto;
  /* padding-top:13rem; */
}

main>div {
  height: 4000px;
}

header{
  position: relative;
  top:0;
  left:0;
  width:100%;
  overflow-x: hidden;
  overflow-y: auto;
  /*height:200rem;*/
}

#navToggle{
  background-color: rgba(0, 0, 0, .15);
  position: relative;
  right: 0;
  top: 0;
  z-index:999;
  height: 2.6rem;
}

#navToggle>a{
  color: rgba(255, 255, 255, .85);
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0 2.5rem;
  text-decoration: none;
  transition: all 300ms ease;
  padding-top:.9rem;
}

#bottom-container{
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

#bottom-container>nav{
  background-color: rgb(250, 209, 14);
  display: none;
  flex: 1;
}

#bottom-container nav>ul{
  list-style-type: none;
}

#bottom-container nav>ul>li{
  position: relative;
}

#bottom-container nav>ul>li>a{
  display: block;
  color: rgba(0, 0, 0, .65);
  padding: 1.3rem 0;
  text-decoration: none;
}

#bottom-container nav>ul>li>a span.toggle{
  background-color: rgba(0, 0, 0, .05);
  color: rgba(0, 0, 0, .25);
  padding: 2px 8px;
}

#bottom-container>nav>ul>li>nav{
  display: none;
  overflow: hidden;
  position: absolute;
  top:100%;
  right: 5%;
  width: 90%;
  z-index: 100;
  background-color: rgb(250, 250, 250);
  margin-bottom:10rem;
}

header>nav>ul>li>nav>ul>li>a {
  color: rgba(255, 255, 255, .85);
}

/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
////   THIS IS THE ONLY FIX I KNOW OF  //////////
*/
main{
  /*padding-top:5rem;*/
}
/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/

/* Medium screens */
@media all and (min-width: 751px) {
  header{
    overflow-y:visible;
    overflow-x:visible;
    padding-bottom:0;
  }

  #navToggle{
    display: none;
  }

  #bottom-container{
    background-color: rgb(250, 209, 14);
    width: 100%;
    border-top: calc(5vh + 2vw) solid yellow;
  }

  #bottom-container>nav{
    display: block;
  }

  #bottom-container>nav>ul{
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 3rem;
  }

  #bottom-container nav>ul>li{
    position: static;
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #bottom-container nav>ul>li>a{
   padding: 0;
  }

  #bottom-container nav>ul>li>a span.toggle{
    display: none;
  }

  #bottom-container >nav>ul>li>nav>ul>li{
    line-height: 2.5rem;
  }
  #bottom-container>nav>ul>li>nav{
    margin-top:-194.5rem;
  }
}

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="head-wrap">
  <div id="second-wrap">
    <header>
      <div id="navToggle"><a href="#">Menu</a></div>
      <div id='bottom-container'>
        <nav>
          <ul>
            <li><a href="#">ITEM ONE</a></li>
            <li class="sub1">
              <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
            <nav>
              <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
              </ul>
            </nav>
            <li><a href="#">ITEM THREE</a></li>
          </ul>
        </nav>
      </div>
    </header>
  </div>
</div>


<main>
  <div>
  <p>now you can see this text</p>
  <p>line 1</p>
  <p>line 2</p>
  <p>line 3</p>
  <p>line 4</p>
  <p>line 5</p>
  <p>line 6</p>
  <p>line 7</p>
  <p>line 8</p>
  <p>line 9</p>
  <p>line 10</p>
    <p>line 11</p>
    <p>line 12</p>
    <p>line 13</p>
    <p>line 14</p>
    <p>line 15</p>
    <p>line 16</p>
    <p>line 17</p>
    <p>line 18</p>
    <p>line 19</p>
    <p>line 20</p>
    </div>
</main>
</body>
</html>

Positioning scrollable content under fixed flexbox navigation menu

Tags:

html

css

css-position

fixed

Austin

2 Answers

Rise

thingEvery

Recent Activity

Donate For Us

Positioning scrollable content under fixed flexbox navigation menu

Tags:

html

css

css-position

fixed

Austin

2 Answers

Rise

thingEvery

Related questions

Recent Activity

Donate For Us