Product Landing Page - How do I make the navbar fixed at the top?

Hi everyone,

I built a Product Landing page.

https://codepen.io/akkisagiraju/full/JQPjNX

I used Flexbox for the navbar. I’m having trouble to stick the navbar at the top of the viewport. Can someone please help me with this?

Thank you.

  1. You have given the nav a class of fixed but there is no CSS for that class. To make an element fixed you just set position: fixed on it.

  2. I would move the position fixed to the header, you also have to make the margin-top into padding-top otherwise it will fail the test for the nav being at the top of the page.

/* or move the fixed class to the header and use it with this CSS */
header {
/*   margin-top: 20px; */
  padding-top: 20px;
  position: fixed;
}
  1. You have too much padding on the .wrapper, use margin to move it away from the viewport edge and padding to make sure the content never goes all the way to the edge of the wrapper.
/* EDIT my bad don't do this */
.wrapper {
  max-width: 1200px;
  margin: 0;
/*   padding: 0 20%; */
  margin: 0 40px;
  padding: 0 20px;
}
/* But this */
.wrapper {
  max-width: 1200px;
  padding: 0 2vw;
  margin: 0 auto;
}

If you do want to use relative units, which may not be that great for this, I’d suggest using the vw unit.

@lasjorg

I would move the position fixed to the header,

I did this. But I think it’s conflicting with Flexbox. The header is now fixed to the left.

  1. You have too much padding on the .wrapper, use margin to move it away from the viewport edge and padding to make sure the content never goes all the way to the edge of the wrapper.

I changed this according to your suggestion and wrapper is not in center anymore. But when I changed the units from percentage to vw, it worked. Thank you!

Edit: I did some tweaking with the widths. Now it all worked out!

Not sure why I posted that CSS my brain must have been afk.

You would use margin auto to center it and then maybe in a media query at smaller screen sizes you would switch to a fixed margin.

.wrapper {
  max-width: 1200px;
  padding: 0 2vw;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .wrapper {
    margin: 0 20px;
  }
}

You can also try this to center the header element, this way the nav also won’t overflow the header.

header {
  position: fixed;
  box-sizing: border-box;
  background-color: #bdc3c7;
  box-shadow: 0 8px 6px -6px #8e44ad;
  border-radius: 16px;
  
  width: 100%;
  max-width: 800px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 10px;
}
1 Like

This made it so much better! Thank you!

Good to hear. A couple of things.

  1. I would add cursor: pointer; to all your buttons.

  2. I think I would give the price cards 100% width and then a max-width of say 320px, then use flex-wrap: wrap; on the flex container.

div #pricing {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

div .plan {
  border: 1px solid black;
  border-radius: 5px;
  width: 100%;
  max-width: 320px;
}

And then also get rid of the % width here as well.

@media (max-width: 600px) {
  div .plan {
    /* width: 60%; */
    align-self: center;
  }
}
  1. Look into making the video responsive (you can also use the embedresponsively site)

  2. I would make the social icons a bit bigger, you can use the sizing classes if you want.

The page looks pretty nice, good job.

Thank you very much for all the suggestions! I’ll try them all and see how it looks. :slight_smile: