Building a Responsive Header, Navigation, and Content Layout with CSS Flexbox

Question

I need help from some CSS masters, I'm hitting my head against the wall trying to get this layout working. I ended up just drawing what I am aiming for in Figma.

Here is the desktop layout I am targeting:

And this is what I am thinking should happen when resized to mobile:

Here is my current attempt/progress:

https://codepen.io/kirkouimet/pen/qBYLJKZ

<div id="container">
    <div id="header">
        <div id="headerLeft">Header Left</div>
        <div id="headerRight">Header Right</div>
    </div>
    <div id="main">
        <div id="navigation">
            <div id="navigationTop">Navigation Top</div>
            <div id="navigationBottom">Navigation Bottom</div>
        </div>
        <div id="content">
            <div id="contentInner">Content Inner</div>
        </div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    height: 100%;
}

#container {
    background: #F0F0F0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#header {
    width: 100%;
    position: fixed;
    height: 50px;
    background: #00AAFF;
    display: flex;
    justify-content: space-between;
}
    #headerLeft {
        background: #00BBFF;
    }
    #headerRight {
        background: #00CCFF;
    }

#main {
    display: flex;
    margin-top: 50px;
    flex-grow: 1;
    background: #AA00FF;
}

#navigation {
    display: flex;
    flex-direction: column;
    width: 260px;
    background: #FF00AA;
    justify-content: space-between;
}
    #navigationTop {
        background: #FF00BB;
    }
    #navigationBottom {
        background: #FF00CC;
    }

#content {
    flex-grow: 1;
    background: #0033CC;
}
    #contentInner {
        max-width: 640px;
        height: 1000px;
        margin: 0 auto;
        background: #0044CC;
    }

Thank you for any help you can offer!!!

Answer 1

Here's a Codepen link and I also pasted the code below! Lemme know what you think.

This is a tricky layout for sure! I had to use some hacks to get exactly what you wanted, but I think it's pretty decent. The hack was having the nav and main page content both using the same grid layout, but the nav one is positioned absolute. The reason I had to do this was to have the nav fill the screen size and allow the nav content to overflow scroll as well as lock an item to the bottom of it.

<header class="header">
  <h1>Company</h1>
  <nav>
    <a href="#">About</a>
    <a href="#">Shop</a>
    <button class="nav-button">Nav</button>
  </nav>
</header>
<main class="page">
  <div class="layout layout-fixed">
    <nav class="nav" data-open="false">
      <div class="nav-top">
        <div>Navigation</div>
        <ul>
          <li><a href="#1">Title 1</a></li>
          <li><a href="#2">Title 2</a></li>
          <li><a href="#3">Title 3</a></li>
          <li><a href="#4">Title 4</a></li>
          <li><a href="#5">Title 5</a></li>
        </ul>
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et elit nunc. Cras vulputate dapibus sem in tempus. Quisque eros nibh, porttitor id sapien ut, sagittis eleifend turpis. Phasellus tincidunt ante eget tellus elementum, ut egestas nisl lacinia. In ornare, leo et fermentum sodales, libero tortor iaculis neque, a sodales neque felis non tortor. Fusce sed venenatis enim. Morbi eget nisi sollicitudin, lobortis mauris ut, pellentesque leo. Etiam scelerisque lectus vitae lorem feugiat lobortis.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et elit nunc. Cras vulputate dapibus sem in tempus. Quisque eros nibh, porttitor id sapien ut, sagittis eleifend turpis. Phasellus tincidunt ante eget tellus elementum, ut egestas nisl lacinia. In ornare, leo et fermentum sodales, libero tortor iaculis neque, a sodales neque felis non tortor. Fusce sed venenatis enim. Morbi eget nisi sollicitudin, lobortis mauris ut, pellentesque leo. Etiam scelerisque lectus vitae lorem feugiat lobortis.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et elit nunc. Cras vulputate dapibus sem in tempus. Quisque eros nibh, porttitor id sapien ut, sagittis eleifend turpis. Phasellus tincidunt ante eget tellus elementum, ut egestas nisl lacinia. In ornare, leo et fermentum sodales, libero tortor iaculis neque, a sodales neque felis non tortor. Fusce sed venenatis enim. Morbi eget nisi sollicitudin, lobortis mauris ut, pellentesque leo. Etiam scelerisque lectus vitae lorem feugiat lobortis.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et elit nunc. Cras vulputate dapibus sem in tempus. Quisque eros nibh, porttitor id sapien ut, sagittis eleifend turpis. Phasellus tincidunt ante eget tellus elementum, ut egestas nisl lacinia. In ornare, leo et fermentum sodales, libero tortor iaculis neque, a sodales neque felis non tortor. Fusce sed venenatis enim. Morbi eget nisi sollicitudin, lobortis mauris ut, pellentesque leo. Etiam scelerisque lectus vitae lorem feugiat lobortis.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et elit nunc. Cras vulputate dapibus sem in tempus. Quisque eros nibh, porttitor id sapien ut, sagittis eleifend turpis. Phasellus tincidunt ante eget tellus elementum, ut egestas nisl lacinia. In ornare, leo et fermentum sodales, libero tortor iaculis neque, a sodales neque felis non tortor. Fusce sed venenatis enim. Morbi eget nisi sollicitudin, lobortis mauris ut, pellentesque leo. Etiam scelerisque lectus vitae lorem feugiat lobortis.
          </p>
        </div>
      </div>
      <div class="nav-bottom">
        Copyright 2022
      </div>
    </nav>
    <div></div>
  </div>
  <div class="layout">
    <div></div>
    <article class="article">
      <h1>
        <div id="1" class="title-offset"></div>
        Title 1
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et elit nunc. Cras vulputate dapibus sem in tempus. Quisque eros nibh, porttitor id sapien ut, sagittis eleifend turpis. Phasellus tincidunt ante eget tellus elementum, ut egestas nisl lacinia. In ornare, leo et fermentum sodales, libero tortor iaculis neque, a sodales neque felis non tortor. Fusce sed venenatis enim. Morbi eget nisi sollicitudin, lobortis mauris ut, pellentesque leo. Etiam scelerisque lectus vitae lorem feugiat lobortis.
      </p>
      <p>
        Donec quam ex, pulvinar ut euismod quis, tempor sit amet erat. Aliquam aliquam vestibulum augue, a fringilla turpis sagittis sit amet. Proin ac imperdiet nisl. Phasellus elementum justo vel sollicitudin pulvinar. Integer malesuada, quam gravida feugiat ultricies, arcu risus iaculis arcu, quis blandit elit nisi pellentesque libero. Nulla auctor orci arcu, in sollicitudin sapien efficitur a. Pellentesque tincidunt ante vel sem bibendum, eget volutpat justo aliquam. In hac habitasse platea dictumst.
      </p>
      <p>
        Cras id ante condimentum mauris efficitur aliquet. Pellentesque eros augue, interdum non egestas a, rhoncus at nisi. Curabitur id finibus metus. Aliquam erat volutpat. Nam pharetra tempus vehicula. Praesent vehicula rhoncus ante nec gravida. Proin ullamcorper eros vitae quam ultricies, ac ultrices tortor sollicitudin. Duis efficitur ligula in augue tristique euismod. Aenean vulputate ex placerat mauris rutrum molestie. Nam eget erat eget neque fermentum interdum sit amet ac mi. Cras fringilla pellentesque mattis. Vivamus ultrices dui at ex ornare eleifend. Proin iaculis sem nec mi interdum, fringilla aliquet orci porta. Cras tempor quis tortor quis tristique. Donec id risus id enim hendrerit finibus.
      </p>
      <h1>
        <div id="2" class="title-offset"></div>
        Title 2
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et elit nunc. Cras vulputate dapibus sem in tempus. Quisque eros nibh, porttitor id sapien ut, sagittis eleifend turpis. Phasellus tincidunt ante eget tellus elementum, ut egestas nisl lacinia. In ornare, leo et fermentum sodales, libero tortor iaculis neque, a sodales neque felis non tortor. Fusce sed venenatis enim. Morbi eget nisi sollicitudin, lobortis mauris ut, pellentesque leo. Etiam scelerisque lectus vitae lorem feugiat lobortis.
      </p>
      <p>
        Donec quam ex, pulvinar ut euismod quis, tempor sit amet erat. Aliquam aliquam vestibulum augue, a fringilla turpis sagittis sit amet. Proin ac imperdiet nisl. Phasellus elementum justo vel sollicitudin pulvinar. Integer malesuada, quam gravida feugiat ultricies, arcu risus iaculis arcu, quis blandit elit nisi pellentesque libero. Nulla auctor orci arcu, in sollicitudin sapien efficitur a. Pellentesque tincidunt ante vel sem bibendum, eget volutpat justo aliquam. In hac habitasse platea dictumst.
      </p>
      <p>
        Cras id ante condimentum mauris efficitur aliquet. Pellentesque eros augue, interdum non egestas a, rhoncus at nisi. Curabitur id finibus metus. Aliquam erat volutpat. Nam pharetra tempus vehicula. Praesent vehicula rhoncus ante nec gravida. Proin ullamcorper eros vitae quam ultricies, ac ultrices tortor sollicitudin. Duis efficitur ligula in augue tristique euismod. Aenean vulputate ex placerat mauris rutrum molestie. Nam eget erat eget neque fermentum interdum sit amet ac mi. Cras fringilla pellentesque mattis. Vivamus ultrices dui at ex ornare eleifend. Proin iaculis sem nec mi interdum, fringilla aliquet orci porta. Cras tempor quis tortor quis tristique. Donec id risus id enim hendrerit finibus.
      </p>
      <h1>
        <div id="3" class="title-offset"></div>
        Title 3
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et elit nunc. Cras vulputate dapibus sem in tempus. Quisque eros nibh, porttitor id sapien ut, sagittis eleifend turpis. Phasellus tincidunt ante eget tellus elementum, ut egestas nisl lacinia. In ornare, leo et fermentum sodales, libero tortor iaculis neque, a sodales neque felis non tortor. Fusce sed venenatis enim. Morbi eget nisi sollicitudin, lobortis mauris ut, pellentesque leo. Etiam scelerisque lectus vitae lorem feugiat lobortis.
      </p>
      <p>
        Donec quam ex, pulvinar ut euismod quis, tempor sit amet erat. Aliquam aliquam vestibulum augue, a fringilla turpis sagittis sit amet. Proin ac imperdiet nisl. Phasellus elementum justo vel sollicitudin pulvinar. Integer malesuada, quam gravida feugiat ultricies, arcu risus iaculis arcu, quis blandit elit nisi pellentesque libero. Nulla auctor orci arcu, in sollicitudin sapien efficitur a. Pellentesque tincidunt ante vel sem bibendum, eget volutpat justo aliquam. In hac habitasse platea dictumst.
      </p>
      <p>
        Cras id ante condimentum mauris efficitur aliquet. Pellentesque eros augue, interdum non egestas a, rhoncus at nisi. Curabitur id finibus metus. Aliquam erat volutpat. Nam pharetra tempus vehicula. Praesent vehicula rhoncus ante nec gravida. Proin ullamcorper eros vitae quam ultricies, ac ultrices tortor sollicitudin. Duis efficitur ligula in augue tristique euismod. Aenean vulputate ex placerat mauris rutrum molestie. Nam eget erat eget neque fermentum interdum sit amet ac mi. Cras fringilla pellentesque mattis. Vivamus ultrices dui at ex ornare eleifend. Proin iaculis sem nec mi interdum, fringilla aliquet orci porta. Cras tempor quis tortor quis tristique. Donec id risus id enim hendrerit finibus.
      </p>
      <h1>
        <div id="4" class="title-offset"></div>
        Title 4
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et elit nunc. Cras vulputate dapibus sem in tempus. Quisque eros nibh, porttitor id sapien ut, sagittis eleifend turpis. Phasellus tincidunt ante eget tellus elementum, ut egestas nisl lacinia. In ornare, leo et fermentum sodales, libero tortor iaculis neque, a sodales neque felis non tortor. Fusce sed venenatis enim. Morbi eget nisi sollicitudin, lobortis mauris ut, pellentesque leo. Etiam scelerisque lectus vitae lorem feugiat lobortis.
      </p>
      <p>
        Donec quam ex, pulvinar ut euismod quis, tempor sit amet erat. Aliquam aliquam vestibulum augue, a fringilla turpis sagittis sit amet. Proin ac imperdiet nisl. Phasellus elementum justo vel sollicitudin pulvinar. Integer malesuada, quam gravida feugiat ultricies, arcu risus iaculis arcu, quis blandit elit nisi pellentesque libero. Nulla auctor orci arcu, in sollicitudin sapien efficitur a. Pellentesque tincidunt ante vel sem bibendum, eget volutpat justo aliquam. In hac habitasse platea dictumst.
      </p>
      <p>
        Cras id ante condimentum mauris efficitur aliquet. Pellentesque eros augue, interdum non egestas a, rhoncus at nisi. Curabitur id finibus metus. Aliquam erat volutpat. Nam pharetra tempus vehicula. Praesent vehicula rhoncus ante nec gravida. Proin ullamcorper eros vitae quam ultricies, ac ultrices tortor sollicitudin. Duis efficitur ligula in augue tristique euismod. Aenean vulputate ex placerat mauris rutrum molestie. Nam eget erat eget neque fermentum interdum sit amet ac mi. Cras fringilla pellentesque mattis. Vivamus ultrices dui at ex ornare eleifend. Proin iaculis sem nec mi interdum, fringilla aliquet orci porta. Cras tempor quis tortor quis tristique. Donec id risus id enim hendrerit finibus.
      </p>
      <h1>
        <div id="5" class="title-offset"></div>
        Title 5
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et elit nunc. Cras vulputate dapibus sem in tempus. Quisque eros nibh, porttitor id sapien ut, sagittis eleifend turpis. Phasellus tincidunt ante eget tellus elementum, ut egestas nisl lacinia. In ornare, leo et fermentum sodales, libero tortor iaculis neque, a sodales neque felis non tortor. Fusce sed venenatis enim. Morbi eget nisi sollicitudin, lobortis mauris ut, pellentesque leo. Etiam scelerisque lectus vitae lorem feugiat lobortis.
      </p>
      <p>
        Donec quam ex, pulvinar ut euismod quis, tempor sit amet erat. Aliquam aliquam vestibulum augue, a fringilla turpis sagittis sit amet. Proin ac imperdiet nisl. Phasellus elementum justo vel sollicitudin pulvinar. Integer malesuada, quam gravida feugiat ultricies, arcu risus iaculis arcu, quis blandit elit nisi pellentesque libero. Nulla auctor orci arcu, in sollicitudin sapien efficitur a. Pellentesque tincidunt ante vel sem bibendum, eget volutpat justo aliquam. In hac habitasse platea dictumst.
      </p>
      <p>
        Cras id ante condimentum mauris efficitur aliquet. Pellentesque eros augue, interdum non egestas a, rhoncus at nisi. Curabitur id finibus metus. Aliquam erat volutpat. Nam pharetra tempus vehicula. Praesent vehicula rhoncus ante nec gravida. Proin ullamcorper eros vitae quam ultricies, ac ultrices tortor sollicitudin. Duis efficitur ligula in augue tristique euismod. Aenean vulputate ex placerat mauris rutrum molestie. Nam eget erat eget neque fermentum interdum sit amet ac mi. Cras fringilla pellentesque mattis. Vivamus ultrices dui at ex ornare eleifend. Proin iaculis sem nec mi interdum, fringilla aliquet orci porta. Cras tempor quis tortor quis tristique. Donec id risus id enim hendrerit finibus.
      </p>
      <p>
        Donec quam ex, pulvinar ut euismod quis, tempor sit amet erat. Aliquam aliquam vestibulum augue, a fringilla turpis sagittis sit amet. Proin ac imperdiet nisl. Phasellus elementum justo vel sollicitudin pulvinar. Integer malesuada, quam gravida feugiat ultricies, arcu risus iaculis arcu, quis blandit elit nisi pellentesque libero. Nulla auctor orci arcu, in sollicitudin sapien efficitur a. Pellentesque tincidunt ante vel sem bibendum, eget volutpat justo aliquam. In hac habitasse platea dictumst.
      </p>
      <p>
        Cras id ante condimentum mauris efficitur aliquet. Pellentesque eros augue, interdum non egestas a, rhoncus at nisi. Curabitur id finibus metus. Aliquam erat volutpat. Nam pharetra tempus vehicula. Praesent vehicula rhoncus ante nec gravida. Proin ullamcorper eros vitae quam ultricies, ac ultrices tortor sollicitudin. Duis efficitur ligula in augue tristique euismod. Aenean vulputate ex placerat mauris rutrum molestie. Nam eget erat eget neque fermentum interdum sit amet ac mi. Cras fringilla pellentesque mattis. Vivamus ultrices dui at ex ornare eleifend. Proin iaculis sem nec mi interdum, fringilla aliquet orci porta. Cras tempor quis tortor quis tristique. Donec id risus id enim hendrerit finibus.
      </p>
      <h1>Some Title</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et elit nunc. Cras vulputate dapibus sem in tempus. Quisque eros nibh, porttitor id sapien ut, sagittis eleifend turpis. Phasellus tincidunt ante eget tellus elementum, ut egestas nisl lacinia. In ornare, leo et fermentum sodales, libero tortor iaculis neque, a sodales neque felis non tortor. Fusce sed venenatis enim. Morbi eget nisi sollicitudin, lobortis mauris ut, pellentesque leo. Etiam scelerisque lectus vitae lorem feugiat lobortis.
      </p>
      <p>
        Donec quam ex, pulvinar ut euismod quis, tempor sit amet erat. Aliquam aliquam vestibulum augue, a fringilla turpis sagittis sit amet. Proin ac imperdiet nisl. Phasellus elementum justo vel sollicitudin pulvinar. Integer malesuada, quam gravida feugiat ultricies, arcu risus iaculis arcu, quis blandit elit nisi pellentesque libero. Nulla auctor orci arcu, in sollicitudin sapien efficitur a. Pellentesque tincidunt ante vel sem bibendum, eget volutpat justo aliquam. In hac habitasse platea dictumst.
      </p>
      <p>
        Cras id ante condimentum mauris efficitur aliquet. Pellentesque eros augue, interdum non egestas a, rhoncus at nisi. Curabitur id finibus metus. Aliquam erat volutpat. Nam pharetra tempus vehicula. Praesent vehicula rhoncus ante nec gravida. Proin ullamcorper eros vitae quam ultricies, ac ultrices tortor sollicitudin. Duis efficitur ligula in augue tristique euismod. Aenean vulputate ex placerat mauris rutrum molestie. Nam eget erat eget neque fermentum interdum sit amet ac mi. Cras fringilla pellentesque mattis. Vivamus ultrices dui at ex ornare eleifend. Proin iaculis sem nec mi interdum, fringilla aliquet orci porta. Cras tempor quis tortor quis tristique. Donec id risus id enim hendrerit finibus.
      </p>
      <h1>Some Title</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et elit nunc. Cras vulputate dapibus sem in tempus. Quisque eros nibh, porttitor id sapien ut, sagittis eleifend turpis. Phasellus tincidunt ante eget tellus elementum, ut egestas nisl lacinia. In ornare, leo et fermentum sodales, libero tortor iaculis neque, a sodales neque felis non tortor. Fusce sed venenatis enim. Morbi eget nisi sollicitudin, lobortis mauris ut, pellentesque leo. Etiam scelerisque lectus vitae lorem feugiat lobortis.
      </p>
      <p>
        Donec quam ex, pulvinar ut euismod quis, tempor sit amet erat. Aliquam aliquam vestibulum augue, a fringilla turpis sagittis sit amet. Proin ac imperdiet nisl. Phasellus elementum justo vel sollicitudin pulvinar. Integer malesuada, quam gravida feugiat ultricies, arcu risus iaculis arcu, quis blandit elit nisi pellentesque libero. Nulla auctor orci arcu, in sollicitudin sapien efficitur a. Pellentesque tincidunt ante vel sem bibendum, eget volutpat justo aliquam. In hac habitasse platea dictumst.
      </p>
      <p>
        Cras id ante condimentum mauris efficitur aliquet. Pellentesque eros augue, interdum non egestas a, rhoncus at nisi. Curabitur id finibus metus. Aliquam erat volutpat. Nam pharetra tempus vehicula. Praesent vehicula rhoncus ante nec gravida. Proin ullamcorper eros vitae quam ultricies, ac ultrices tortor sollicitudin. Duis efficitur ligula in augue tristique euismod. Aenean vulputate ex placerat mauris rutrum molestie. Nam eget erat eget neque fermentum interdum sit amet ac mi. Cras fringilla pellentesque mattis. Vivamus ultrices dui at ex ornare eleifend. Proin iaculis sem nec mi interdum, fringilla aliquet orci porta. Cras tempor quis tortor quis tristique. Donec id risus id enim hendrerit finibus.
      </p>
    </article>
  </div>
</main>

html {
  --nav-height: 77px;
  scroll-behavior: smooth;
}

.header {
  background-color: #ff6ecd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.header h1 {
  margin: 0;
}

.nav {
  background-color: #ec526f;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 20px;
  
  /* mobile styles */
  position: fixed;
  top: var(--nav-height);
  bottom: 0;
  transform: translateX(0%);
  transition: transform 300ms;
}

.nav[data-open="false"] {
  transform: translateX(-100%);
}

.nav-top {
  overflow: auto;
}

.nav-bottom {
  margin-top: auto;
}

.article {
  background-color: #dac5ff;
  padding: 20px 40px;
}

.title-offset {
  position: relative;
  top: calc(var(--nav-height) * -1 - 30px);
}

@media screen and (min-width: 900px) {
  .nav-button {
    display: none;
  }
  
  .nav {
    position: static;
  }
  
  .nav[data-open] {
    transform: translateX(0);
  }
  
  .layout {
    display: grid;
    grid-template-columns: 24rem 1fr;
  }

  .layout-fixed {
    position: fixed;
    top: var(--nav-height);
    bottom: 0;
  }
}

const navButton = document.querySelector('.nav-button');
const nav = document.querySelector('.nav');

navButton.addEventListener('click', () => {
  const isOpen = nav.dataset.open === "true";
  if (isOpen) {
    nav.dataset.open = "false";
  } else {
    nav.dataset.open = "true";
  }
});