Section heading going under fixed navbar

Question

I am designing a page where on top i have a fixed navbar and under that I will have a <main> block. Inside <main> I have mutiple sections. From Navbar when I click on any link to jump to the specific section the section heading slides under the navbar.

I have tried adding margin-top for both <main> and <section> but still the issue persist.

html, body{
  margin:0;
  padding:0;
  scroll-behavior: smooth;
}
.nav{
  height: 4rem;
  width:100%;
  background: transparent;/* #889EAF; */
  border: 2px solid black;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
main{
  margin-top:4rem;  
}

section {
  display: flex;
/*   margin-top:4rem; */
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  height: 93vh;
/*   margin-top:7vh; */
}
.about {
  height:100vh;
  background:#D4B499;
}
.more {
  height:fit-content;
  background: #F3D5C0;
}
.card{
  display: flex;
  flex-direction: column;
  /* position: absolute; */
  /* top: 13%; */
  align-items: center;
  background-color: white;
  padding: 0.75rem;
  width: 90%;
  height: fit-content;
  border: 1px solid #bfc5c9;
  border-radius: 1.125rem;
  box-shadow: 0px 0px 20px #bdc3c7;
  /* z-index: 10; */
  margin: 1rem;
}
.heading {
  align-self: center; 
  font-size: 2.5rem;
  padding: 1rem 0rem 0rem 2rem;
}

<div class="nav">
  <div><a href="#about">About</a></div>
<div><a href="#more">More</a>
  </div>
</div>
<main>
  <section id="about" class="about">
<div class="heading">This is about section</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </section>
  <section id="more" class="more">
<div class="heading">This is something more</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </section>
</main>

Please find a live example of the issue @ CodePen

Position fixed will always overlap content. Did you mean sticky instead of fixed? — no ai please, Sep 13 '21 at 05:00

score 2 · Answer 1 · answered Sep 13 '21 at 05:08

As your nav is fixed so you have to position it using top

  top: 0;
  z-index: 1;
  background-color: white;

html,
body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.nav {
  top: 0;
  z-index: 1;
  background-color: white;
  height: 4rem;
  width: 100%;
  background: white;
  /* #889EAF; */
  border: 2px solid black;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

main {
  margin-top: 4rem;
}

section {
  display: flex;
  /*   margin-top:4rem; */
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  height: 93vh;
  /*   margin-top:7vh; */
}

.about {
  height: 100vh;
  background: #d4b499;
}

.more {
  height: fit-content;
  background: #f3d5c0;
}

.card {
  display: flex;
  flex-direction: column;
  /* position: absolute; */
  /* top: 13%; */
  align-items: center;
  background-color: white;
  padding: 0.75rem;
  width: 90%;
  height: fit-content;
  border: 1px solid #bfc5c9;
  border-radius: 1.125rem;
  box-shadow: 0px 0px 20px #bdc3c7;
  /* z-index: 10; */
  margin: 1rem;
}

.heading {
  align-self: center;
  font-size: 2.5rem;
  padding: 1rem 0rem 0rem 2rem;
}

<div class="nav">
  <div><a href="#about">About</a></div>
  <div><a href="#more">More</a></div>
</div>
<main>
  <section id="about" class="about">
    <div class="heading">This is about section</div>
    <div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </section>
  <section id="more" class="more">
    <div class="heading">This is something more</div>
    <div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </section>
</main>

Along with the properties you mentioned a padding-top of 4rem is also needed to completely fix the issue. — Shail, Sep 13 '21 at 07:33

Hargunbeer Singh · Answer 2 · 2021-09-13T05:22:09.557

1

You can position the <main> element with position absolute like this

main{
  position: absolute;
  top: 4rem;
}

also add z-index to the navbar so that it stays above the main elements, you can do it like this

.nav{
    z-index: 1
}

credits to @HR01M8055 for suggesting the z-index edit

edited Sep 13 '21 at 05:22

answered Sep 13 '21 at 05:00

Hargunbeer Singh

327
3
9

1

Without `z-index` `nav` will go behind `main`. – DecPK Sep 13 '21 at 05:10
@HR01M8055 thats right, I'll update the answer and give appropriate credit. – Hargunbeer Singh Sep 13 '21 at 05:20

score 1 · Answer 3 · answered Sep 13 '21 at 05:01

1

Add these to .nav. class

top: 0;
background: white;

top: 0 puts the nav on top and you need to set a background color so the nav is visible on top

answered Sep 13 '21 at 05:01

Jack

788
3
13

1

You should also use `z-index` otherwise it will hide behind `Card` – DecPK Sep 13 '21 at 05:09

Section heading going under fixed navbar

3 Answers3