CODEWITHSUNDEEP
htmlcss
gxvigo
gxvigo

Reputation: 837

Issue with fixed positioned header and href

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>

Upvotes: 2

Views: 462

Answers (1)

Andifined
Andifined

Reputation: 479

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;
}

Upvotes: 3

Related Questions