CSS Grid + Fixed Position (aka "keep the nav bar when scrolling")

Hi there Community!
So I’m exploring the grid, and I’m trying to make the upper nav bar fixed, so it doesn’t scroll, creating what I consider a cool effect :sunglasses:.
I have split the nav bar in two: logo + regular nav, so I can give different sizes and play with the layout.
The thing is, when I change the position of logo to fixed, the size of the element changes, and nav dissapears :boom:.
I have already researched on our beloved www and didn’t find a real explanation for that.
Can anyone help me understand :pray:t4:?
:black_heart:
Kike

=> Code here:

—html —

Kike Molares

  • About
  • Contact

We just want money and spiritual life

Overlap!

  • TECHNOLOGY
  • ILLUSTRATION
  • DESIGN
  • MEDIA
  • ART

Footer

— CSS —

.container {
position: relative;
display: grid;
max-width: 100%;
margin: auto;
padding: 10px;
grid-gap: 10px;
grid-template: repeat(12, 1fr) / repeat(12, 1fr);

}

#logo {
position: fixed;
background-color: dodgerblue;
grid-area: 1 / 1 / 3 / 4;
padding: 5%;
text-transform: uppercase;
z-index: 5;
}
nav{
background-color: dodgerblue;
grid-area: 1 / 5 / 3 / 13;
}

.left {
background-color: dodgerblue;
grid-area: 4 / 1 / 10 / 2;
}

.nav_2 {
background-color: beige;
grid-area: 4 / 7 / 10 / 13;
}

.overlap {
background-color: lightcoral;
grid-area: 6 / 4 / 8 / 6;
z-index: 5;
}

footer {
background-color: dodgerblue;
grid-area: 12 / 1 / 13 / 13;
align-content: stretch;
}

1 Like

Have you tried setting the position property of the nav bar to anything? See this article for something that should help you.


Also, could you see this post to see how to correctly format code in your posts, so we can see the HTML as well? Also, could you post a screenshot of the part of your website you’re talking about(if the above doesn’t work)?

1 Like

Hi @codeneutrino, thanks so much for the help.
Yes, I’ve tried different positions in the parent box, but still the behaviors was weird.
The best result so far is after including both logo and nav into and the setting to grid.
Here the code – apologies for the lack of etiquette.
In the screenshot, you’ll be still able to see that the box on the nav bar is not totally to the right, which I guess should be the normal behavior?
That’s my main brain itch, I do not understand the behavior!

Thanks in advance for all the support! :black_heart::fire:

<body>
  <header>
    <div id="logo"><h1>Kike Molares</h1></div>
      <nav>
        <ul class="nav">
          <li class="nav"> Vision</li>
          <li class="nav"> About</li>
          <li class="nav"> Let's talk!</li>
        </ul>
      </nav>
  </header>
    <div class="container">
      <section class="left">
        <h2>We just want money and spiritual life</h2>
      </section>
      <div class="main_message">
        <p>A self-taught visual designer with an MA in Media (Journalism).<br><strong>More than 3 year expereience in Start-Ups Worldwide.</strong></p>
        <a >more...</a>
      </div>
      <section class="nav_2">
        <ul class="nav_2">
          <li class="nav_2">TECHNOLOGY</li>
          <li class="nav_2">ILLUSTRATION</li>
          <li class="nav_2">DESIGN</li>
          <li class="nav_2">MEDIA</li>
          <li class="nav_2">ART</li>
        </ul> 
      </section>
      <footer>
        <h1>Footer</h1>
      </footer>
    </div>
  </body>

CSS

body {
    position: relative;
    background-color: #363635;
    margin: 10px;
}

header{
  position: fixed;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(12, 1fr) / repeat(12, 1fr);
  z-index: 10;
}
#logo {
  background-color: dodgerblue;
  grid-area: 1 / 1 / 3 / 4;
  padding: 5%;
  text-transform: uppercase;
}
nav{
  background-color: dodgerblue;
  grid-area: 1 / 5 / 3 / 13;
}
  .container {
    position: relative;
    display: grid;
    max-width: 100%;
    grid-gap: 10px;
    grid-template: repeat(12, 1fr) / repeat(12, 1fr);
  }
  
  .left {
    background-color: dodgerblue;
    grid-area: 4 / 1 / 10 / 2;
  }
  
  .nav_2 {
    background-color: beige;
    grid-area: 4 / 7 / 10 / 13;
  }
  
  .main_message {
    background-color: lightcoral;
    grid-area: 6 / 4 / 8 / 6;
    z-index: 5;
  }
  
  footer {
    background-color: dodgerblue;
    grid-area: 12 / 1 / 13 / 13;
    align-content: stretch;
  }

How do you mean the behaviours were still weird? The logo and nav bar are their own elements-have you tried reducing the margin of both elements?

I mean, why does the nav doesn’t reach the end (aka end of column 12)?
Why this doesn’t apply?

nav{
  background-color: dodgerblue;
  grid-area: 1 / 5 / 3 / 13;
}