Build a Product Landing Page [SOLVED]

HTML-CSS
1

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:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page

2

Browse this for how to make good navbar.

3

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.

5

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

7

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

2 Likes
8

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;}

10

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.

11

Thanks! This worked.

12

Thanks! This worked fine.

13

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: