twitter bootstrap navbar fixed top overlapping site

by

Your answer is right in the docs:

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. 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.

and in the Bootstrap 4 docs…

Fixed navbars use position: fixed, meaning they’re pulled from the
normal flow of the DOM and may require custom CSS (e.g., padding-top
on the ) to prevent overlap with other elements.

More Related Contents:

  1. Vertically center element on HTML page with some content on top (Bootstrap)
  2. Bootstrap 4 Carousel “Half of previous”
  3. Importing CSS and Bootsrap in HTML code
  4. Bootstrap column on mobile positions
  5. How to vertically center a container in Bootstrap?
  6. `col-xs-*` not working in Bootstrap 4
  7. Extend bootstrap row outside the container
  8. Bootstrap columns stacking vertically on mobile device
  9. How to make Bootstrap 4 cards the same height in card-columns?
  10. Bootstrap – align button to the bottom of card
  11. Bootstrap: add margin/padding space between columns
  12. How to add hamburger menu in bootstrap
  13. Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape? [duplicate]
  14. How to remove focus around buttons on click
  15. How to vertically center a Bootstrap carousel-caption?
  16. Exclude menu item from the collapse of bootstrap 3 navbar
  17. Bootstrap 4 – Responsive cards in card-columns
  18. Inline Form nested within Horizontal Form in Bootstrap 3
  19. Same height column bootstrap 3 row responsive
  20. Why does `transform` break `position: fixed`?
  21. Change Bootstrap input focus blue glow
  22. How do I put a Bootstrap Glyphicon inside an asp:Button in ASP.Net?
  23. Maintain image aspect ratio in carousel
  24. How to prevent background scrolling when Bootstrap 3 modal open on mobile browsers?
  25. Bootstrap 3 grid, does it *really* matter how many columns are in a row?
  26. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  27. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  28. How to work with ellipsis in bootstrap responsive table
  29. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  30. Bootstrap dropdown not working

Leave a Comment