'HTML bookmarks : when clicked does not show my vertical Menu

I want to create a web site like this site https://andrewborstein.com/

But in my page when I click the Link it goes to the correct place but the the DIV gets displaced.

I want the Vertical Menu to stay in its original position even after the link is clicked. In my attached test.html file my vertical menu is a DIV named id="myName".

<html>
  <head>
     <style>       
       #myName{
            top: 0px;
            left: 0px;

            width: 200px;
            height: 180px;

            position:absolute;

            background-color: rgb(48, 12, 177);
        }
       
        #myDesc{
            top: 0px;
           left: 0px;

           width: 1300px;
           height: 1500px;

           margin-left: 200px;

           position:absolute;

           background-color: rgb(21, 168, 99);

        }      

     </style>

  </head>

  <body>     
          
          <div id="myName" style="font-style:italic; color: black;"> 
                <a href="#hName" style="font-style:italic; color: rgb(219, 211, 211);">Click on This</a>             
          </div> 

          <div id="myDesc" >
            <p>This chapter explains ba bla bla</p>
            <p>This chapter explains ba bla bla</p>
            <p>This chapter explains ba bla bla</p>
            <p>This chapter explains ba bla bla</p>
            <p>This chapter explains ba bla bla</p>
            <p>This chapter explains ba bla bla</p>
            <p>This chapter explains ba bla bla</p>
            <p>This chapter explains ba bla bla</p>
            <p>This chapter explains ba bla bla</p>

            <h2 id="hName">I am Deelliiee</h2>
            <p>This chapter explains ba bla bla</p>

          </div>
  </body>
</html>
htmlbookmarks


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions