position: fixed working incorrectly on mobile devices-CodePudding

I have a responsive website I am working on. When it switches to the mobile layout, the topbar scrolls down a bit before it sticks to the top of the screen where it should be, misaligning everything. This works fine on the desktop layout.

#topbar {
  font-weight: 300;
  background-color: white;
  z-index: 999;
  position: fixed;
  width: 100%;
  height: 15%;
  box-shadow: 0 5px 10px rgba(124, 124, 124, 0.3);
}

@media (min-width: 35em) {
  #topbar {
    height: 60px;
  }
}

<html>

<head>
  <link href='stylesheet.css' rel='stylesheet' />
  <script defer src='main.js'></script>
  <meta name='viewport' content='width=device-width, initial-scale=1.0' />
</head>

<body>
  <section id='topbar'>
    <nav>
      <h1 id='logo'>Logo</h1>
      <ul id='links'>
        <li>
          <a href='#home'>
            <h1>Home</h1>
          </a>
        </li>
        <li>
          <a href='#about'>
            <h1>About</h1>
          </a>
        </li>
        <li>
          <a href='#products'>
            <h1>Products</h1>
          </a>
        </li>
        <li>
          <a href='#jobs'>
            <h1>Jobs</h1>
          </a>
        </li>
      </ul>
      <div id='menu-button'>
        <div id='line1'></div>
        <div id='line2'></div>
        <div></div>
      </div>
    </nav>
  </section>
</body>
</html>

CodePudding user response：

You might have to change the structure. The reason for changing the structure is that you need to have the top header (Logo section) fixed on the top and your nav should start after that section. If the Logo section takes the entire width, the nav section automatically stays below the logo section.

So, the changes I provided are:

Separate out the logo section and nav section in different divs and make them sibling so that nav section appears below the logo section.
Added top: 0 on the fixed logo section to keep it on top always.
Added margin-top of the height of the logo section to the nav section to make nav section visible .

<html>
  <head>
    <style>
      #topbar {
        top: 0;
        font-weight: 300;
        background-color: white;
        z-index: 999;
        position: fixed;
        width: 100%;
        margin-bottom: 49px;
        height: 60px;
        box-shadow: 0 5px 10px rgb(124 124 124 / 30%);
      }
      #links {
        margin-top: 60px;
      }
      body {
        margin: 0;
      }
      @media (min-width: 35em) {
        #topbar {
          height: 60px;
        }
      }
    </style>
    <script defer src="main.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="topbar">
      <h1 id="logo">Logo</h1>
    </div>
    <nav>
      <ul id="links">
        <li>
          <a href="#home"><h1>Home</h1></a>
        </li>
        <li>
          <a href="#about"><h1>About</h1></a>
        </li>
        <li>
          <a href="#products"><h1>Products</h1></a>
        </li>
        <li>
          <a href="#jobs"><h1>Jobs</h1></a>
        </li>
      </ul>
      <div id="menu-button">
        <div id="line1"></div>
        <div id="line2"></div>
        <div></div>
      </div>
    </nav>
  </body>
</html>

CodePudding user response：

I think that's because of not using

top
left properties

Whenever you use position property you must use these 2 properties

Added Those two properties to #Topbar

#topbar{
top: 0;
left: 0;
}