Search code examples
htmlcsscss-grid

CSS Grid sticky/fixed nav below hero-area

My CSS grid design https://codepen.io/AnonymousCaptain/pen/ExPWMNm This one contains the "hero-area" unlike the snippet on this page.

I need the nav to stick to the top of the viewport once the user scrolls past the hero-area.

Despite several attempts, I have still not managed to make the #navbar position sticky/fixed.

I've read the position:sticky might not be well supported yet, but really, I'll take whichever is the most elegant solution. https://caniuse.com/#feat=css-sticky ?

CSS tag #navbar needs to fix once it reaches the viewport top and from there, scroll past anything in #content

:root {
  --radius: 5px;
  --padding: 40px;
}

.btn {
  background-color: transparent;
  color: #fff;
  padding: 10px 30px;
  border-radius: 0;
  transition: all 0.3s ease-in 0s;
}

.btn-transparent {
  border: 1px solid #4e595f;
}

.container {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1);
  grid-template-rows: repeat(3);
  grid-gap: 0.5rem;
  height: 100vh;
  grid-template-areas:
    "navbar"
    "content";
}

#navbar {
  background: #d81b60;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: navbar;
  height: 50px;
}

.about .block:hover {
  border-bottom: 2px solid #57cbcc;
}

#content {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  background: #242930;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: content;
  height: 100vh;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 0.5rem;
  height: 250vh;
  grid-template-areas:
    "content1"
    "content2"
    "content4"
    "content3"
    "content5"
    "content6";
}

/* Is the screen larger than 600 pixels? Make it two columns.*/
@media (min-width: 700px) {
  #content {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "content1 content2"
      "content3 content4"
      "content5 content6";
  }
}

#blueimg {
  background: #c9268d;
  background-image: url("https://i.imgur.com/wvpehP5.png");
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: content1;
}

#blue {
  background: #d81b60;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content2;
  display: flex;
}

#blue p {
  margin: auto;
}

#red {
  background: #b31077;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content3;
  display: flex;
}

#red p {
  margin: auto;
}

#redimg {
  background: #c51162;
  background-image: url("https://i.imgur.com/Mg2XiX9.png");
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: content4;
}
#purpleimg {
  background: #bf1179;
  background-image: url("https://i.imgur.com/24huGsn.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  grid-area: content5;
}

#purple {
  background: #880e4f;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content6;
  display: flex;
}

#purple p {
  margin: auto;
}
<div class="container">
  <div id="navbar">
    navbar</div>
  <div id="content">
    <div id="blueimg"></div>
    <div id="blue">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
    <div id="red">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
    <div id="redimg"></div>
    <div id="purpleimg"></div>
    <div id="purple">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
  </div>

</div>

Solution

  • The problem was here .container {height: 100vh;}. Replaced it with min-height: 100vh;. In case with static height there was no place for element with position: sticky; to move in.

    And added position: sticky; top: 0; (declaring the side of offset is necessary for sticky) to your #navbar. Now works fine.

    There is a lot of fixed height. Try to avoid of using them without special need. In most cases they can be replace with min-height.

    :root {
  --radius: 5px;
  --padding: 40px;
}

.btn {
  background-color: transparent;
  color: #fff;
  padding: 10px 30px;
  border-radius: 0;
  transition: all 0.3s ease-in 0s;
}

.btn-transparent {
  border: 1px solid #4e595f;
}

.container {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1);
  grid-template-rows: repeat(3);
  grid-gap: 0.5rem;
  min-height: 100vh;
  grid-template-areas:
    "hero-area"
    "navbar"
    "content";
}

#hero-area {
  background: #c9268d;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: hero-area;
  display: grid;
  grid-gap: 0.2rem;
  align-content: center;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1591825495543-981fa4410313");
  background-size: cover;
  font-size: 42px;
  position: relative;
  justify-content: center;
  align-items: center;
}

#hero-area:before {
  content: "";
  background: rgba(0, 0, 0, 0.63);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#hero-area > div {
}

#hero-area .block {
  text-align: center;
  z-index: 99;
}

#hero-area .block h1 {
  font-size: 90px;
  color: #fff;
  text-transform: capitalize;
  font-weight: 700;
  margin-bottom: 20px;
}

#hero-area .block p {
  color: #fff;
  font-size: 20px;
  width: 70%;
  margin: 0 auto;
}

#hero-area .block .btn-transparent {
  margin-top: 40px;
  border-color: #fff;
  padding: 14px 50px;
  font-size: 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}

#navbar {
  background: #d81b60;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: navbar;
  height: 50px;
  position: sticky;
  top: 0;
}

.about .block:hover {
  border-bottom: 2px solid #57cbcc;
}

#content {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  background: #242930;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: content;
  height: 100vh;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 0.5rem;
  height: 250vh;
  grid-template-areas:
    "content1"
    "content2"
    "content4"
    "content3"
    "content5"
    "content6";
}

/* Is the screen larger than 600 pixels? Make it two columns.*/
@media (min-width: 700px) {
  #content {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "content1 content2"
      "content3 content4"
      "content5 content6";
  }
}

#blueimg {
  background: #c9268d;
  background-image: url("https://i.imgur.com/wvpehP5.png");
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: content1;
}

#blue {
  background: #d81b60;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content2;
  display: flex;
}

#blue p {
  margin: auto;
}

#red {
  background: #b31077;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content3;
  display: flex;
}

#red p {
  margin: auto;
}

#redimg {
  background: #c51162;
  background-image: url("https://i.imgur.com/Mg2XiX9.png");
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: content4;
}
#purpleimg {
  background: #bf1179;
  background-image: url("https://i.imgur.com/24huGsn.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  grid-area: content5;
}

#purple {
  background: #880e4f;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content6;
  display: flex;
}

#purple p {
  margin: auto;
}
    <head>
  <link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>

<div class="container">
  <div id="hero-area">
    <div class="block">
      <h1>Company Name</h1>
      <p>
        Company descriptive text... look at us, we are to be taken seriously, wow.
      </p>
      <div id="app">
        <a href="#content" v-smooth-scroll="{duration: 1500, offset: -5, }" class="btn btn-transparent page-scroll">Explore Us</a>
      </div>
    </div>

  </div>
  <div id="navbar">
    <a href="index.html">
      <img style="height: 50px;" src="https://image.flaticon.com/icons/svg/3069/3069165.svg" />
    </a>
    navbar</div>
  <div id="content">
    <div id="blueimg"></div>
    <div id="blue">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
    <div id="red">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
    <div id="redimg"></div>
    <div id="purpleimg"></div>
    <div id="purple">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
  </div>

</div>