·

8.238K

· nicooga

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.

Related protips

Have a fresh tip? Share with Coderwall community!

Post

Post a tip

Sponsored by

#native_company#

#native_desc#

#native_cta#

Filed Under

Accelerate Your Web Development Skills

Post a job for only 299ドル

Sponsored by #native_company# — Learn More