O que muda

Observe a falta do <meta name="viewport" content="width=device-width, initial-scale=1">, que desativa o aspecto de zoom de sites em dispositivos móveis. Além disso, redefinimos a largura do nosso contêiner e alteramos a barra de navegação para evitar o colapso, e estamos basicamente prontos.

Em relação às barras de navegação

Como um aviso, o componente navbar é bastante complicado aqui, pois os estilos para exibi-lo são bastante específicos e detalhados. Substituições para garantir que a exibição dos estilos de desktop não seja tão eficiente ou elegante quanto se gostaria. Esteja ciente de que pode haver armadilhas potenciais à medida que você constrói em cima deste exemplo ao usar a barra de navegação.

Navegadores, rolagem e elementos fixos

Layouts não responsivos destacam uma desvantagem importante para elementos fixos. Qualquer componente fixo, como uma barra de navegação fixa, não será rolável quando a janela de visualização se tornar mais estreita que o conteúdo da página. Em outras palavras, dada a largura do contêiner não responsivo de 970px e uma janela de visualização de 800px, você potencialmente ocultará 170px de conteúdo.

Não há como contornar isso, pois é o comportamento padrão do navegador. A única solução é um layout responsivo ou usar um elemento não fixo.

Sistema de grade não responsivo

Um terço
Um terço
Um terço