Help - Navbar is not full width and covers content on small screen

Help - Navbar is not full width and covers content on small screen
0

#1

If anyone can help with this I would be grateful, cheers


#2

Bootstrap .container-fluid has padding of 15px. A quick fix would be to overwrite the padding in your css:

I’d also suggest using your own CSS for these first few project as well, to get a better hang of CSS before using a library(e.g Bootstrap) or preprocessor(e.g LESS or SASS).

i.e .container-fluid { padding: 0; }

For the small screen issue, it appears to be working now.


#3

Hi Brandon

Thanks for the fix with the padding as for the small screen issue I still seem to get it. When I reduce the width of the screen it covers the top of the content. A scroll bar appears which lets me scroll down but not up. Is this something to do with stacking?


#4

Sorry, I missed that.

Look at your media query @ 979px. Bootstrap is using the position-fixed css property (which they call fixed-top). This will cause some behavior that causes that element to get pulled out of the normal flow, causing other items to hide-behind them at times.

If you haven’t all ready, set the body’s padding to something greater than the navbar height. This will “offset” the body below the navbar at all times.

You can read a bit about Bootstraps Navbar positioning here.

and about position-fixed here(what Bootstrap is actually doing with ‘fixed-top’):
https://www.w3schools.com/cssref/pr_class_position.asp