Elements going under the nav bar

1

https://codepen.io/advitya-sharma/pen/eYpoxrj

the elements are going under the nav bar, and how can I make llinks in nav bar to be in horizontal direction with spacing ?
I used flex box but still links are vertical

2

Add the following style to your CSS:

nav ul {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

Your header was flexed, but not your nav links. Adjust the justify-content and the width to get it to format and expand as you’d like.

3

yeah it changes the nav links but still the content is going under the nav bar

4

Do you mean that you want the nav bar to scroll with your page instead of always being visible?

5

no the content of my website is hiding behind navbar

6

Try making the content of your website larger and the navbar a tad smaller. I don’t know if that’s what you want but it might help.

7

see the link that might give you some idea

8

First of all, I was told recently that it is poor design to have a horizontal scroll bar.

Here is my code to help you out.

https://codepen.io/hopefulcodegirl/pen/MWaXORM

9

but I dont have horizontal scroll bar

10

You did when I last looked. What happened now?

11

Do you watch some youtube videos for your projects? Because I would suggest watching videos by this guy.

This guy has helpful videos for the freecodecamp challenges. But he does not do everything you would need to in order to pass the test . I

12

videos are good but currently I want content not to get behind navbar

13

Unfortunately, your test suite requires that that happens.

14

Your content is behind the navbar because your header has positioned fixed. Change it to position: sticky and add this to your CSS:

form {
  margin-top: 50px;
}

Avoid position fixed whenever you can.

1 Like
15

If you wish for the content to not be covered so much by the navbar, increase the size of your webpage.

16

Advitya-sharma cannot do that or the test won’t pass. The test suite said to have a fixed navbar.

17

This is what I’m reading from the test: “The navbar should always be at the top of the viewport.”

18

Yeah, that’s what it means. I tried using sticky before. When I do that I don’t pass that part of the test.

19

Strange, when I changed it to sticky it passed :thinking:

20

Now I am all confused.