For Fixed Navbar sections are not getting into exact position-CodePudding

I am using bootstrap nav menu in my web page,Nav bar position is fixed When i click a menu item i need to go to particular section using id, It is going to particular section but section is going slight upside, How to get exact position on click of menu item.

    <nav  (scroll)="onscroll()" [ngClass]="navbarfixed?'fixed':'nofixed'">
        <div >
            
             <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span  style="background-color: white;"></span>
          </button>
          <div  id="navbarNav">
            <ul >
                <li ><a  href="#about">About Us</a></li>
                <li ><a  href="#services">Services</a></li>
                <li ><a  href="#career">Careers</a></li>
                <li ><a  href="#contact">Contact Us</a></li>
            </ul>
          </div>
        </div>
      </nav>
<section id="about">
    <app-why-us></app-why-us>
    <app-discover></app-discover>
</section>
<section id="services">
    <app-services></app-services>
</section>
<section  id="career">
    <app-career></app-career>
</section>
<section id="contact">
    <app-reach-us></app-reach-us>
</section>

<app-footer></app-footer>

CodePudding user response：

You need to add a scroll margin as explained in this SO question.

section { scroll-margin-top: 50px; }

Your question is tagged Bootstrap 4, but your code uses Bootstrap 5 attributes. So the example snippet uses version 5.

// auto close on click
// see: https://stackoverflow.com/a/42401686/943435

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarNav')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) => {
    l.addEventListener('click', () => { bsCollapse.toggle() })
})

section {

  scroll-margin-top: 50px;

  min-height: 5em;
  width: 100%;
  padding: 0.25em;
  margin-bottom: 10em;
  border: 1px solid lightgray;
  background-color: aliceblue;
}

    <nav  (scroll)="onscroll()" [ngClass]="navbarfixed?'fixed':'nofixed'">
        <div >
            
             <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span  style="background-color: white;"></span>
          </button>
          <div  id="navbarNav">
            <ul >
                <li ><a  href="#about">About Us</a></li>
                <li ><a  href="#services">Services</a></li>
                <li ><a  href="#career">Careers</a></li>
                <li ><a  href="#contact">Contact Us</a></li>
            </ul>
          </div>
        </div>
      </nav>
      
      
<div style="margin-top: 65px;"></div>      
      
<section id="about">
    <h4>About</h4>
    <app-why-us></app-why-us>
    <app-discover></app-discover>
</section>
<section id="services">
    <h4>Services</h4>
    <app-services></app-services>
</section>
<section  id="career">
    <h4>Careers</h4>
    <app-career></app-career>
</section>
<section id="contact">
    <h4>Contact</h4>
    <app-reach-us></app-reach-us>
</section>

<div style="margin-top: 10em;"></div>


<app-footer></app-footer>


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>