Beta Technical Documentation project - trouble linking to headings for smaller media devices

Here is my technical doc project:

Everything looks like I want (ignoring the one test error), except when the page is shrunk down below a width of 625px. When a nav link is clicked at the top, I want the content to shift to that anchor in the maindoc portion. When a nav title is clicked, it currently is hidden behind the navbar at the top.

I am hoping to just use css to make this work correctly, but I can so far not achieve the functionality I want.

Any advice on what to do would be great.

Add this to your CSS

@media (max-width: 650px) {
        padding-top: 260px;

and also remove margin-top from #main-doc

#main-doc {
    /* margin-top:250px; */

Yes, that does what I want, but it does create a side-effect which is a big gap between sections if one tries to scroll down to the next section instead of using the nav bar. Thoughts?

Okay, see this pen instead.

Basically, I added a “filler” in your html

<div id="filler">

The initial height of this filler is 0px, so it’s hidden on a wide browser window.

when you go narrow, (below 650px width), this filler becomes

        height: 260px;
        display: block;

so it will fill up the top space (i.e. behind your navbar)

I then wrapped the whole #main-doc in a div

<div id="fixed">

Basically, I want to recreate the scroll bars.

        overflow: auto;

The initial height I set is 300px. But then a problem arises if user tries to resize browser window. The scroll bar may not go all the way to bottom of page.

So this is where jQuery comes in to compute the correct height for the div, based on the browser window size.

$(window).resize(function() {
    // get height of browser
    var browserHeight = $(this).height();
    var navbarHeight = 260;
    var infoHeight = browserHeight - navbarHeight;
    $('#fixed').css({"height": infoHeight});

final solution:

Thanks for the response. I had a feeling I would have to use JS to make this work. I was really trying to come up with a solution with only css, but I guess that is not possible if someone resizes the browser.

OK, I took another approach for when the screen is resized below 655px width. I created two separate sections without the fixed positioning and both of them have independent scrollbars (at least when first resized). What I do not understand is when I click on a nav link, the scroll bar for the bottom content section changes to encompass the entire screen height instead of just the bottom section. Why does it do this and how can I fix it without JavaScript?