In mobiles, when I click the links in the nav bar, the content is hidden

HTML-CSS
1

Here: https://codepen.io/sp2012/pen/XyxEqd in mobiles, when I click the links in the nav bar, part of the content is hidden by the nav bar. Any ideas of how I can fix that?

2

Hey make sure you verify your email first since I can’t go into full page view.

The owner of this Pen needs to verify their email address to enable Full Page View.

3

Great. I verified my email address.

4

At any width where you will need to scroll to show the linked part of the page the anchor will be buried under your fixed header.

By taking the header out of the flow with fixed positioning the container below it moves up to the top to take its place. You have fixed that for the initial page load with a relative position 100px from the top.

Clicking a nav-link will scroll that anchor element to the top of the window. Which even with the relative positioning is still really the top.

You can fix that too by styling each of the anchors with
padding-top:100px;
margin-top:-100px;

You can select the anchors in your CSS by their id (there’s only 3), by a class that you add to each of these or with the :target pseudo-class.

At smaller screen the header links fold under the logo so 100px won’t be enough clearance. You could control that with a media query or use some javascript to dynamically detect the header height and style accordingly.

There are also some cool ways to get the same results with flex or grid that don’t require you to know the actual height of the header. Seek out a tutorial / example on fixed header or fixed navbar if you need something more.

5

Thank you for your reply, it worked!

1 Like
6

padding-top:100px;
margin-top:-100px;

Thanks, it worked for larger screen sizes, but in smaller screens the title of the anchor doesn’t show up, when I click on the links. I tried to solve this problem, with a media query and the code you provided, but no luck. Any ideas?

7

That’s OK. I fixed it.