Build a Technical Documentation Page in Project4

1

I am stuck the following. Please guide.

User Story #14: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user.

2

Hi @saradasutar ,
welcome to the freeCodeCamp forum!

It means that, on large devices, the navbar should always be in view like this, no matter the scroll position:

image
image870Ă—834 121 KB

Here is a link to the example:

In particular, this part solves the positioning and height:


#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

You can read about positioning here: https://developer.mozilla.org/en-US/docs/Web/CSS/position

1 Like
3

thanks for your early reply. Even after putting this the problem remains and I could not pass that test.

“1. On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.”
Again thanks.

4

Hey,
Could you show us your code? A codepen with the test-script would be great.

5

Look at the example at codepen.

6

After putting the above code, in editor view in codepen there was still one test could not pass as mentioned earlier. But in FULL PAGE VIEW, I passed the test. Thanks friend.

1 Like