Issue with fixed positioned header and href

user_2293527 0
Viewed 68

I am struggling with in-page links and fixed header. I have a sticky header (position fixed) of 50px. This allows me to have the header always visible even if scrolling down in the page. In my page, I have then a menu with links to other sections in the page. I used href with IDs target. Problem is that when I click on the link, the page positions the target at the very top of the page, where the header hides my target section for 50px.

The code below shows the issue

<html>
<head>
        <style>
        .header {
            position: fixed;
            top: 0px;
            right: 0;
            left: 0;
            margin-left: auto;
            margin-right: auto;
            background-color: red;
            height: 50px;
        }

        .container1 {
           content: none;
           height: 200px;
           background-color: green;
         }
        .container2 {
           content: none;
           height: 800px;
           background-color: lightblue;
        }


    </style>
</head>

<body>

    <div class="header">header</div>

    <div class="container1"></div>
    <div class="container2">

        <a href="#block1">block1</a>

        <div id="block1">Some text</div>            
    </div>

</body>

css html
1 Answers

This is just how anchors work. To achieve your goal, try giving the target a padding of your header height. That will fix it.

#block1 {
  padding: 60px 0;
}
user_67019030
Related