When clicked, anchor links goes to right place but deletes the body margins

Question

I want the main section to keep it's padding. Whenever the anchors are clicked the padding is completely ignored and overwritten and the content section goes above the fixed menu. After this, is needed to reload the page or re-inject the live code server for it to come back to normal.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #000000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

main {
  padding: 15px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.menu {
  width: 98.5%;
  position: fixed;
  top: 3;
  background-color: #c4c4c4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 7px 7px 0px 0px;
  border-bottom: 4px solid #000;
  z-index: 999;
}

.logo {
  position: relative;
  color: black;
  padding: 0 10%;
  font-size: 2em;
}

.navbar {
  padding: 15px 5%;
  position: relative;
}

.all-content {
  height: 100vh;
  background-color: #ffffff;
  overflow: auto;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

section {
  min-height: 100vh;
}

#index {
  display: flex;
  align-items: center;
  padding: 0 0 0 10%;
  border-bottom: 7px solid black;
  background-color: white;
}

#about {
  min-height: 105vh;
}

#about2 {
  background-color: white;
  min-height: 112vh;
  display: flex;
  flex-direction: column;
  border-top: 3px solid black;
}

#contact {
  border-top: 3px solid black;
  min-height: 106vh;
  position: relative;
}

<body>
  <main>
    <header class="menu">
      <a href="index.html" class="logo">logo.</a>
      <nav class="navbar">
        <a href="#index" class="ativado" target="_self">Home</a>
        <a href="#about">About</a>
        <a href="#about2">about 2</a>
        <a href="#contact">contact</a>
      </nav>
    </header>
    <div class="all-content">
      <section id="index">
        lorem
      </section>
      <section id="about">
        lorem
      </section>
      <section id="about2">
        lorem
      </section>
      <section id="contact">
        lorem
      </section>
    </div>
  </main>
</body>

You can take a better look at the problem here:

https://codepen.io/nagatacs/pen/qBQjPLx

No, I want the anchor to not delete the " main " padding, which makes the " all-content" div go above the fixed menu, stucking to the top of the page. — Naga, Jul 03 '23 at 16:49

score 0 · Answer 1 · answered Jul 03 '23 at 16:52

Here is a snippet that provides a fixed header and scrollable sections when the links in the header are clicked.

    body {
      margin: 0;
      padding: 0;
    }
    .header {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #f1f1f1;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .header .logo {
      margin-left: 10px;
    }
    .header .links {
      margin-right: 25px;
    }
    .header a {
      margin-left: 10px;
      text-decoration: none;
      color: #333;
      font-weight: bold;
    }
    section {
      height: 100vh;
      padding:20px
 
    }
    .section-divider {
      border-bottom: 1px solid #ccc;
    }
    #about {
      background-color: blue;
    }
    #home {
      background-color: #eaf7ff;
    }
    #contact {
      background-color: #fde8e8;
    }

<!DOCTYPE html>
<html>
<body>
  <div class="header">
    <div class="logo">
      <img src="logo.png" alt="Logo" width="100" height="100">
    </div>
    <div class="links">
     <a href="#about">About</a>
      <a href="#home">Home</a>
      <a href="#contact">Contact</a>
    </div>
  </div>
  <section id="about">
    <h2>About Section</h2>
  </section>

  <section id="home">
    <h2>Home Section</h2>
  </section>
 
  <section id="contact">
    <h2>Contact Section</h2>
  </section>
 
</body>
</html>

When clicked, anchor links goes to right place but deletes the body margins

1 Answers1