htmlcssfixedhamburger-menu

Fixed Header Containing Image and Hamburger Menu With Scrollable Content

This is what I am trying to do What I want to achieve

link

While I want the image 9 and the hamburger menu fixed and scroll the rest of the content.

I changed the position to fixed and the header is messed up.

What I am Getting

What I Get When I Scroll Down

This is my code:

#title_and_menu {
  position: fixed;
  /*was previously relative when the code worked*/
  width: 100%;
}

#myHeader {
  display: inline-block;
  background-color: white;
}

#drop_menu {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  cursor: pointer;
}

#drop_menu>*{
  width: 35px;
  height: 1px;
  background-color: #c9c9c9;
  margin: 6px 0;
}
<body>
  <div id="title_and_menu">
    <div id="myHeader">
      <img src="https://ninepoint.cc/wp-content/themes/9pt2023/images/logo.svg" alt="home image" width="30" height="30">
    </div>
    <div id="drop_menu">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class=”section1” style="background-color:#e2e2e2;width:100%">
    <h2 align="center" style="padding-top:200px;color:#767676">Heading</h2>
    <h1 align="center" style="color:#707070">Introduction</h1>
    <p style="margin-left:1em;margin-right:5em;padding-bottom:12.5em;color:#9f9f9f" align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</body>

Solution

  • I was about to add this in comments but its so messed that's why adding in resposes. Issue is very simple to fix, instead of position: fixed use position: sticky with top: 0 and it should be fixed.

    Below is working example.

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
            height: 1002vh;
            margin: 0;
            padding: 0;
        }

        .mainDiv {
            color: white;
            width: 100%;
            height: 100vh;
            background-color: #1e1e1e;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #title_and_menu {
            position: sticky;
            top:0;
            /*was previously relative when the code worked*/
            width: 100%;
        }

        #myHeader {
            display: inline-block;
            background-color: white;
        }

        #drop_menu {
            position: absolute;
            top: 50%;
            right: 25px;
            transform: translateY(-50%);
            cursor: pointer;
        }

        #drop_menu>* {
            width: 35px;
            height: 1px;
            background-color: #c9c9c9;
            margin: 6px 0;
        }
    </style>
</head>

<body>

    <div id="title_and_menu">
            <div id="myHeader">
                <img src="https://ninepoint.cc/wp-content/themes/9pt2023/images/logo.svg" alt="home image" width="30" height="30">
            </div>
            <div id="drop_menu">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class=”section1” style="background-color:#e2e2e2;width:100%">
            <h2 align="center" style="padding-top:200px;color:#767676">Heading</h2>
            <h1 align="center" style="color:#707070">Introduction</h1>
            <p style="margin-left:1em;margin-right:5em;padding-bottom:12.5em;color:#9f9f9f" align="center">Lorem ipsum
                dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.</p>
        </div>

</body>

</html>