For Fixed Navbar sections are not getting into exact position

Question

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 class="navbar navbar-expand-lg navbar-light " (scroll)="onscroll()" [ngClass]="navbarfixed?'fixed':'nofixed'">
        <div class="container-fluid">
            
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon" style="background-color: white;"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item about"><a class="nav-link" href="#about">About Us</a></li>
                <li class="nav-item services"><a class="nav-link" href="#services">Services</a></li>
                <li class="nav-item career"><a class="nav-link" href="#career">Careers</a></li>
                <li class="nav-item contact"><a class="nav-link" 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 class="my-5" id="career">
    <app-career></app-career>
</section>
<section id="contact">
    <app-reach-us></app-reach-us>
</section>

<app-footer></app-footer>

score 3 · Accepted Answer · answered Jul 21 '22 at 07:56

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 class="navbar navbar-expand-lg bg-light navbar-light fixed-top" (scroll)="onscroll()" [ngClass]="navbarfixed?'fixed':'nofixed'">
        <div class="container-fluid">
            
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon" style="background-color: white;"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item about"><a class="nav-link" href="#about">About Us</a></li>
                <li class="nav-item services"><a class="nav-link" href="#services">Services</a></li>
                <li class="nav-item career"><a class="nav-link" href="#career">Careers</a></li>
                <li class="nav-item contact"><a class="nav-link" 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 class="my-5" 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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

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

section { scroll-margin-top: 50px; } is working fine, But issue is li is becoming active after scroll of that 50px — Sudhir, Jul 21 '22 at 08:55

For Fixed Navbar sections are not getting into exact position

1 Answers1