Product Landing Page / Need Help

Code Feedback
1

https://codepen.io/wheyskills/full/MXxdaG/

Hey all! This is my poor first attempt at the product landing page. Of course, it’s not done yet, there still a lot of CSS to be added. However, I have 2 problems which I can’t solve as of right now.

  1. Whenever I try to make the navigation bar sticky (by adding position: fixed) it ruins my whole nav layout.
  2. I have added media queries to the CSS but the Tests don’t seem to count it.

Would appreciate some feedback.
Thank you in advance!

2

well the 2nd issue is an easy fix:

header {
   background: linear-gradient(to bottom right, yellow, pink);
  
   @media (max-width: 600px) {
    flex-wrap: wrap;
  } 
}

The above is quoted from your pen. The @media is nested inside the header selector. Move it out so it is not nested and it will be seen by the test bucket.

As for the first issue. I think is best that you fork your pen, make the changes you think make the nav bar sticky, and then ask for help with the new pen linked in so people can see what you mean without have to touch your code too much.

3

#1: https://stackoverflow.com/questions/48796426/how-to-make-a-fixed-navbar-while-using-flexbox

4

Thank you both very much. I managed to get it done.

Here is the updated version:

Do you like it?