search

mdbootstrap / material-design-for-bootstrap

Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
https://mdbootstrap.com/docs/standard/
MIT License
9.34k stars 1.15k forks source link

Navbar - Fixed Top - Main Content hidden #99

Closed Juchar closed 7 years ago

Juchar commented 7 years ago

Using a fixed top navbar will hide the main content.

See here where the first h1 is hidden.

Same behaviour for Angular Material Design Bootstrap.

mattonit commented 7 years ago

It's not a bug. It's intended behavior of Bootstrap. Anyway, we'll improve our preview page. If you want <h1> to be shown, please add some padding to <main>. Adding padding-top:56px; should be enough

AbdulRehman3 commented 6 years ago

it can be avoided by adding 60px margin-bottom as; .navbar{margin-bottom: 60px;}

DavidRimar commented 4 years ago

Hello, adding margins does the trick, however, I wouldnt call it a solution, it is just a work-around. It still does NOT change the fact that by adding "fixed-top" class for the navbar, the subsequent content goes BEHIND the navbar. The work-around requires specifying margins responsively through media queries, but even then, for specific bands of width (e.g. Extra small devices (portrait phones, less than 576px)), adding a fixed margin like 90px will only work for a specific resolution within that band. Overall, if this is the only way around this (not found any other solutions anywhere), I am still inclined to call it a bug. What's the benefit of having this behaviour?