Product landing page problem with position fixed: solution found

When I add position fixed to the header element everything moves. I’m not sure what I am doing wrong. I’m trying not to copy the example.

1 Like

You are using display: flex that why you are not to do this

The example uses display flex.

Also, I don’t understand why I need display flex on the nav when it is nested in the header which is display flex. I would think everything nested would have the flex-direction row property.

So, I took out the un-ordered list and used simple anchor tags and added a width of 100% to the header and that corrected the problem.

Thank you, I will remove flex; it doesn’t seem to work in the media query to change direction to column.

welcome do you want to collab on a youtube video so that we can amazing resposive page that we will sell to some third party

Not ready for that. I find css difficult to get it to do what you want.

I’m really hoping javascript goes better.

  1. About your question on flex and the header/nav.

Only direct children are affected, so when you make the header a flex container only the direct children becomes flex items. To make anything inside the nav a flex item the nav itself has to be a flex container.

  1. You have a typo in your media query, it is display not dislay
1 Like

Thank you for the response.

I’ve been playing with it.

Right now I think my header is fixed however my video scrolls over it and then it is back when I get to my paragraph.

I can’t post a link right now, but I appreciate your feedback.

I think your site looks great.