Product Landing Page - Issues with flexbox

HTML-CSS
1

Hej!

I need some input when it comes the the Product Landing Page hand-in. I thought i was nearly done with it until i saw that “the header needs to stay in place when scrolling” is part of the task and also that there needs to be a media query included.

I tried putting;
position:fixed;
in the , although that messes up the navbar and collapses all of my elements.
Would appreciate some input on this.

For the media query it’s basically the same. I tried adding a media query which will make the navbar into flex-direction:column, although this completely messes up the design and outlook and I’m lost as to how to proceed.

Any input/support is much appreciated.

2

that is a really common issue. when you need to make a navbar flex and you are using flexbox to lay it out then you need to set a width of 100% to make it the same width as the container so it doesnt act weird.

Also dont forget to add a margin-top to element after nav because a fixed position element is taken out of the normal flow and it will start overlapping with the elements after it.

for a mobile view i would suggest you to implement a dropdown menu instead because navbars have a reputation of not looking good on small screen sizes. here’s an awesome video if you want to learn how to do that.

Hope this helped! :slight_smile:

1 Like
3

position: fixed removes the element from normal document flow so you have to push the content that follows down yourself. It is also necessary to set the offset and width on the fixed element.

/* fixed header */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* push the content that follows down */
main {
  margin-top: 80px;
}

A slightly easier option is to use position: sticky with a top offset of 0. That will keep the element in flow and still be stuck to the top. You do have to be mindful of the height of the scroll container (shouldn’t be an issue with your page).

#header {
  position: sticky;
  top: 0;
}
1 Like
4

Thanks alot!

Really makes sense!
I tried the position:sticky but without anchoring the header to the top with:

top:0;

Although one issue remains, when i scroll to the bottom of the page, the headers within the “price-boxes” get “stickied” to the top of the viewport when scrolling past them :confused:

@Staranbeer
Thanks for your help and input !
I agree , making a dropdown is way better than having it collapsing into the column-direction. Will review the video you suggested! Thanks!

5

Use the id #header selector instead of the element type selector header. Otherwise, all <header> elements will use the same styles.

6

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