Product landing page - Navbar Help

HTML-CSS
1

Hi, I’m having trouble with the layout here. First problem is I am not passing the test that says to keep the navbar at the top. Visually it is but apparently it must not be according to code. Also the video on the home tab is hidden under the nav menu when the screen becomes smaller. Any advice? or help?

2

your <nav> with id= nav-bar should be at top fixed.
You have fixed <ul>

3

you can add this to your media query :

body {
    margin-top:30vh;
  }

or alternativly implement a collapse button
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

4

Thank you very much. This is very helpful. Any tips on fixing the logo at the top to the left of the nav-bar?

5

You could set the position to sticky and float to left

6

Thank you. Sticky seems to help layout better. Float doesn’t seem to affect it. Also not exactly to the left fo the nav-bar either unfortunately

7

Do you want to have something like this?

b

8

yes that looks right

9

Make your <header id="header"> as position fixed and give it a top and left to 0 and width: 100%

And for the same id="header" apply the flex properties,

Now, you must remove the position: fixed you have applied to the ul and id="nav-bar"

If you are not familiar with flex, here’s a link

11

add the followin in your nav-bar id. Like so… (Your test will pass 16/16)

#nav-bar{
position: fixed; /what you have there/
top: 0;
}

12

Thanks. I think to pass the test I needed to have the nav-bar fixed. but now I can style it to look appropriate. I’ll try this.