Build a Product Landing Page [SOLVED]

Tell us what’s happening:
#Layout - 1. The navbar should always be at the top of the viewport.

Pls help. I am stuck on this.
Your code so far
See the Pen FCC build a product landing page; Google Calendar
Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.75 Safari/537.36 — Flash:0 — Flash:0.

Link to the challenge:

Browse this for how to make good navbar.

The link you posted does say how to make it at the top of the viewport in bootstrap, but I am not using bootstrap so i do not have a bootstrap navbar.

Do a search on position: fixed.

Are you suggesting changing my navbar to position: absolute to position: fixed?
It is currently on position: absolute.

You currently have no styling on the nav element with id=“nav-bar”. I was not referring to any other element’s styling.

Exactly what Randall suggested. position: fixed; top: 0px;


I have fixed this problem. However, now when you scroll the nav links are transparent along with the google logo. I tried to make the background-color white and it did not work.

Here is my code:
#nav-bar{ position: fixed; top: 0px; background-color:white;}

Because you have given all of the other elements a position of absolute, there is nothing inside the nav bar giving it any heigh or wdith. Give the nav-bar a height of some value and a width of 100% and you will see it.

Honestly, you do not need to position those other elements with absolutely positioning to get the same effect. Read about how you could use display: flex on the #nav-bar element. You will have to modify your existing html a little, but it is totally possible with flexbox.

NOTE: As I was typing this reply, I noticed @Sujith3021 put a link to a flexbox guide, which you should definitely check out.


You have given position absolute for all the elements in the navbar and used the left to make it appear in the center. It’s not a right way. Have a look at the flexbox to move elements.

Thanks! This worked.

Thanks! This worked fine.

I have tried flexbox before and it is a little complicated. But don’t worry. I have figured it out from Randell Dawson’s Answer: