Home > Article > Web Front-end > How Can I Prevent the Navbar from Obscuring Page Content in Bootstrap?
Navbar Obscuring Page Content: A Solution
Bootstrap's top navigation bar (
To address this issue, consider implementing a padding strategy:
body { padding-top: 60px; }
This padding will shift the content downward, enabling the navigation bar to float above without obscuring any content. However, this approach may create a gap at the top of the page when viewed on smaller screens.
To prevent this, use a media query to adjust the padding based on the screen width:
@media (max-width: 979px) { body { padding-top: 0px; } }
This ensures that on narrower screens, the padding is removed, eliminating any unwanted spacing. By implementing this solution, you can maintain a functional navigation bar while ensuring the seamless display of important page content.
The above is the detailed content of How Can I Prevent the Navbar from Obscuring Page Content in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!