Menu "jumps" below the nav id

1

Hi,
after revisiting my portfolio page, I discovered this strange error: The nav section doesn’t jump to the header of the section, but below it. Can anybody please help me out? The link:
http://codepen.io/Huargh/full/pNvxmE/

2

Hello :slight_smile: , the problem is with the navbar, when the browser follow the id after it scroll the target element at the top of the viewport and the title go rear the navbar. You can solve this problem inserting the entire page content inside a div after the navbar, example:

</nav>

<div class="page-container">
<!-- Header -->
<header>
...
</div>

and adding this style in your css

.page-container {
  max-height: calc(100vh - 51px);
  overflow: auto;
}

( Sorry for my english ) bye :wink:

1 Like
3

Hi,
to be honest I do not fully understand neither the explanation to the problem nor the solution (plus: I had to google that vh as a unit of measure even exists), but apparently that page-container class solves it.
Thanks!

4

I’m glad that my answer solve your problem, I try to explain more why this work. You have this situation:

Your page body includes the fixed navbar ( it still on the top when you scroll the page and it’s over your page content ) and the page content. The viewport is the size of your browser window. The browser automatically add a scrollbar when the page body is bigger then the browser window ( viewport ).

If the navbar wasn’t fixed on the top, you wouldn’t have this problem when follow a target element inside the page content, but in this case happen this:

Because the browser doesn’t care of your navbar e put your target element at the top of the viewport and you see the result like if it scroll a bit more then your request.

My solution separe the navbar from the page content ( in fact you can remove the attribute “fixed” from the navbar ) and then ( by css ) set the height limits of the page content to not be higher then the viewport area to prevent the browser to add it’s scrollbar at the entire page body.

max-height: calc(100vh - 51px)

vh means “Viewport Height”. I subtract 51px because the navbar height is exactly 51px.

Done that the body height is exactly equal to the browser viewport, now we do the work of the browser: add the scrollbar only at the page content ( where it is more high then the viewport ):

overflow: auto

When now you follow a target element the browser doesn’t scroll the page body but the page content and the page content top is just below the navbar and your section title doesn’t be covered.

Hope this help :slight_smile:

3 Likes
5

that’s an AWESOME explanation! Thanks a ton! I’ll include you in my evening-prayer :wink:

1 Like