Bootstrap 3: *really* simple nav over carousel responsive layout

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.