Navbar Fixed To Top Issue

Bootstrap Studio Help
1

hi

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

BS-Capture2
BS-Capture2822×191 13.8 KB

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

BS-Capture3
BS-Capture3891×283 16.7 KB

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

2

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>
</body>

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

CSS

html {
  scroll-padding-top: 58px;
}

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