Navbar Fixed To Top Issue


I have issue that when I set the Navbar Fixed to Top, the second Section got moved up and thus the content show partially as shown

And when I set the Navbar to Default, the second section content display fully as shown

I want the Navbar Fixed to Top and at the same time I don’t want my content to moved up. How do I fix this? thanks

Something like this will fix the fixed-top issue

<body class="d-flex flex-column vh-100 bg-body-tertiary ">
	<nav class="navbar navbar-expand-md fixed-top bg-body shadow">...</nav>
	<main class="main">YOUR-CONTENT-HERE</main>
	<footer class="mt-auto">...</footer>

The value 58px is the height of your navbar, the value is to prevent the content scroll under the navbar when click a nav-link.

The value 160px is to give your content a little space under the navbar on page load
adjust the values to your liking


html {
  scroll-padding-top: 58px;

.main {
  margin-top: 160px;
1 Like