I've been working on making one of those fancy landing pages with a big image/carousel and the nav floating over it.
The solutions in the net imply rather complex rules. This is really simple. The content of the page stays always the same. Just need to wrap the nav into a container and make it float over the rest of the stuff.
// This bootstrap variable $screen-sm-min: 768px .navbar_container // The original margin pushes the carousel down when on mobile // we could have used .navbar-static-top but.. meh nav margin-bottom: 0px @media (min-width: $screen-sm-min) position: fixed width: 100% top: 50px z-index: 1000 // for mobile the remove the padding from the container @media (max-width: $screen-sm-min) .container padding: 0px
Optionally, I added this selectors to the collapsable mobile nav so it displays better.
@media (max-width: $screen-sm-min) .navbar-collapse padding: 0px .navbar-nav margin: 0px
Then, for mobile resolutions the nav goes back to normal.
Here is a codepen to see it live.