-2

I am using scroll-behavior: smooth css for smooth scrolling. The navigation bar is sticky and when a click on the menu item it take me to the defined section.

The problem is the section goes under the sticky navbar. I want it to stop till the height of navbar.

I am using bootstrap 4+.

I have not use any java scripts. So how can I give some margin or padding to the section?

Trushar Gavit
  • 19
  • 8

1 Answers1

0

top nav bar blocking top content of the page

Add to your CSS:

body { 
    padding-top: 65px; 
}

From the Bootstrap docs:

The fixed navbar will overlay your other content, unless you add padding to the top of the body.

Lucas Lopvet
  • 1
  • 1
  • The navbar is transparent and when scroll happen it changes the background color. So if I give padding to top it will have white blank space. – Trushar Gavit Dec 29 '20 at 15:03
  • 1
    Add the padding to the content container, if you share your page or your code it will be easier to help. – Lucas Lopvet Dec 30 '20 at 16:13