My Technical Documentation Page Project attempt

[anon92163060]

I easily finished this project.

Then, with using the media at 600px. I want the menu to be on top, and the information underneath. I didn’t quite manage it.

I’m struggling to understand it.
Otherwise I’m happy with this project. Can you help me about this problem?

https://codepen.io/shauncraig/full/BaQzzQb

[bbsmooth]

For your narrow view:

• You’ve still got a left margin of 285px on the main content. You’ll want to get rid of that.

• The nav is now at the top and takes up height which is overlapping the content. So you’ll need to do something to move the content down far enough so that it doesn’t go under the nav. I wonder if there is a CSS property you could use to create extra space above the main content? Maybe something similar as to how you were creating space on the left side of the content

[anon92163060]

Ah, I kinda understand it a bit.
Thanks.

…
Almost got it to what I like now.
When it’s 600px width, the menu is correct now, and the information is in the correct place.
The link’s are working, but the placement is wrong. Just one more thing to fix.

If I want, a few more media queries to make it better.

[bbsmooth]

@anon92163060

The link’s are working, but the placement is wrong

Ya, I had a feeling after you fixed the first two issues you’d be asking about this one.

There is a trick to this. Each link in the nav is pointing to a <section> tag. So you’ll want to add the following CSS to the sections as follows:

section {
  padding-top: 200px;
  margin-top: -200px;
}

You can adjust the numbers as you see fit (but keep them both the same, other than one is positive and the other negative). Now when you click the nav links the section heading will come up right below the nav. And then add a little smooth scrolling to html and you should be good to go.

This trick should probably only be done in narrow view. In wide view I think you want the heading to go all the way to the top of the page.

[anon92163060]

@bbsmooth

section {
  padding-top: 200px;
  margin-top: -200px;
}

Many thanks for this.
Totally left my mind, as I was happy that I 95% finished this project etc.
I would have eventually got there, as I was thinking about using margin and padding on the section.

@bbsmooth

And then add a little smooth scrolling to html and you should be good to go.

Your very good. I forgot about the smooth scrolling.