Bootstrap Navbar Overlapping Body Content

I am having some issues with my Bootstrap navbar. I have a lot of tabs in the navbar so the header gets on separate line and the tabs get on 2nd line which doesn't look good. beca

Solution 1:

Acoording to bootstrap navbar-fixed-top docs:

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

I think if it takes two lines on non-mobile viewport, you can set

@media screen and (min-width: 768px) {
    body { padding-top: 100px; }
}

Solution 2:

I work on a lot of different bootstrap sites with different themes and styling. Keeping the navbar padding right when changing styling to meet customer requests was a pain. I came up with this solution for Bootstrap 4. You would put this in a scss file after you have imported your theme and bootstrap.

body {
    padding-top: $navbar-padding-y + $nav-link-height + $navbar-padding-y;
}