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
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;
2 Likes
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.
2 Likes
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: