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.

#4

Do a search on position: fixed.

#5

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

#6

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

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

#9

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.

2 Likes
#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:

#14