Technical Documentation Page—help with Content 13 and Layout 1

1

Hi,

My CodePen is at: https://codepen.io/sethstephanz/pen/yWNPpO?editors=0100.

I’m having issues with two points on this project: Content test 13 ( 13. When I click on a navbar element, the page should navigate to the corresponding section of the “main-doc” element (e.g. If I click on a “nav-link” element that contains the text “Hello world”, the page navigates to a element that has that id and contains the corresponding .), which it’s not even clear to me what they want, and the first layout 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.), which relates to having a fixed-position menu that changes according to view-port size. When I set the menu to “position: fixed;”, it not only doesn’t pass the test but it also ends up eating the body of my page.

Any help would be appreciated. Thanks!

2

You want the 20% when the screen is large, and 100% when the screen is small, but you have 20% for the smaller screens.

When you use position: fixed on an element, that element is no longer “visible” to the other elements. So the rest of the elements will act like the navbar isn’t there, which is why the navbar is eating up space.

You can deal with this by manually adding some margins to the other elements.

2 Likes
3

20% of what?

Ok, thanks for the tip on using position: fixed. So, in a responsive environment, you would just add margin using responsive units, right?

4

@sethstephanz

I do not think you need the position: fixed;.
In desktop mode you can set .nav-link to display: block;.

What do you think?

1 Like
5

I was talking about the width of navbar.

width: 20% for min 1000px (i.e. screens larger than 1000px)
width: 100% for max 1000px (i.e. screens smaller than 1000px)

You don’t need to use 20% (or relative units) btw–that was the number that I saw on your codepen.

You just need to have a good control over the thickness of your navbar, and make sure that the margin matches the thickness.

I don’t think it’s a good idea to use responsive units, since that could cause the thickness of the navbar to vary wildly, which doesn’t seem ideal.

1 Like
6

I took a look. Combining position: fixed with display: block gives the effect I think they want, but when I implemented display: block on its own, it didn’t check the tests.

7

.nav-link { display: block; } goes in the media query.

1 Like
8

I commented off position: fixed and it doesn’t seem to address any of the tests. They’re asking for a menu that scrolls along with you.

9

Ok, thanks for the information. Any idea what they mean by “13. When I click on a navbar element, the page should navigate to the corresponding section of the “main-doc” element (e.g. If I click on a “nav-link” element that contains the text “Hello world”, the page navigates to a element that has that id and contains the corresponding.” that isn’t already present in the file?