Bootstrap 3: * realmente * navegação simples sobre layout responsivo de carrossel

Tenho trabalhado em fazer uma daquelas páginas de destino chiques com uma grande imagem / carrossel e a navegação flutuando sobre ela.

As soluções na rede implicam em regras bastante complexas. Isso é muito simples. O conteúdo da página permanece sempre o mesmo. Só preciso embrulhar o nav em um contêiner e fazê-lo flutuar sobre o resto das coisas.

// 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

Opcionalmente, adicionei esses seletores ao navegador móvel recolhível para que ele seja exibido melhor.

@media (max-width: $screen-sm-min)
  .navbar-collapse
    padding: 0px

    .navbar-nav
      margin: 0px

Então, para resoluções móveis, o nav volta ao normal.

Aqui está um código para vê-lo ao vivo.