Product Landing Page - Navbar won't stay on top

HTML-CSS
1

Hello!

I am having a problem with my product landing page I can’t seem to be able to fix. My navbar was obscuring the content on the page so I added margin-top to the div below it. However, this pushes the navbar down from the top of the page. I would appreciate any suggestions on how to fix this. Thank you!

2

I’m looking around and it seems like the navbar and your top section are, for the lack of a better term, stuck together.
When I commented out part of this css

.infogrid{
  width:80%;
  //background-color:#eeeeee;
/*   margin: 100px auto 0px auto; */

Both your navbar and the top part of the page both went to the top. And even just adding a margin top to it will also bring the navbar down with it. It’s got me a bit stumped as well.

1 Like
3

Yeah that’s the 100px of top margin I hoped to add to the top of the page but it keeps bringing the navigation bar down with it. All I can think of to fix it is to add some negative margin to the nav bar to bring it back up but it feels like a band-aid fix.

Thank you for checking out the code

4

I had issues with my own site that’s doing weirdness like covering up the top part of my sections.
So I played around some more gave your .infogrid a position of relative and padding-top of 100px. That sort of fixed the issue but caused problems with your infogrid with the text going out of the boxes at the bottom.

1 Like
5

Thank you!! That seems to fix it. Adding a little height to the info boxes is going to be a lot simpler problem to solve than fixing the original issue :slightly_smiling_face:

1 Like
6

You’re very welcome. I would definitely try to check it in mobile view because of the media code in your css just to make sure nothing weird is going on with it. And if the navbar goes behind things give it a z-index of 1.

1 Like
7

Thank you! I’ll check it

8

This is your code. I have just added a ‘top’ property set to the zero value. If it is what you wanted to do:

nav{
  background-color:#eeeeee;
  height:100px;
  display:flex;
  flex-direction:row-reverse;
  width:100%;
  position:fixed;
  top: 0; ----------------- here!
}
1 Like
9

Thank you! I had completely forgotten about that property. Such a simple fix in the end :smile:

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.