Solucionado
Ao coloca o título do site como o que é sugerido no exercício ao abrir o menu automaticamente ele joga as opções do menu para baixo devido o tamanho do título do site. Mas se colocar somente "Top" os itens do menu se abrem e a primeira opção fica na mesma linha do "Top". Isso não ocorre por exemplo no próprio site do Bootstrap. Pensei em colocar espaços na frente do nome para poder forçar o menu a ir para baixo ao ser aberto mas não sei se seria a melhor solução.
Você colocaria este top nas classes das suas tags? Bom, explica melhor a sua dúvida pra poder te ajudar.
As classes top do bootstrap na seção de menus , no geral, tem a intenção de fixar o seu menu no topo da janela.
O componente nav que aparece na seção responsiva tem as próprias configurações de funcionamento e elas são um pouco mais rígidas do que em outros frameworks como Zurb Foundation, Skeleton ou Materialize.
Como não entendi muito bem a sua pergunta, sugiro que dê uma olhada no componente deles para encontrar o que deseja
http://getbootstrap.com/components/#navbar
Nesse link você pára direto nas classes que controlam as tags "nav" do bootstrap.
Lembre-se , também, de não ficar preso para sempre ao bootstrap. Ele é apenas uma porta de entrada para o mundo dos frameworks, se permita pegar exemplos de outros frameworks como os citados acima para aumentar seu vocabulário e entender como o próprio bootstrap funciona.
Espero ter ajudado :)
Acho que me expressei mal mas o "top" não é uma classe e sim o nome do site. O nome do site no curso é "TopCasaFinaArquitetura". O que eu quis dizer é que se o nome do site fosse somente "Top", ou seja, um nome pequeno, ocorre que o menu sobe e fica na mesma linha do nome "Top". Se você entrar no site do proprio Bootstrap vc verá que o problema não ocorre mesmo o nome não sendo grande.
Isso pode ser resolvido usando uma div com col-sm-12 para separar os conteúdos.
Assim, quando você fizer o menu, em vez de ele ficar em cima, ele desce para baixo do Top
Isso acontece por que o sistema de grids do Bootstrap é feito utilizando a propriedade float:left. Você também pode usar a classe bootstrap .clearfix que resolve os problemas de float que podem ser causados por menus menores
:)
Sim, depois vendo as aulas vi essa questão do grid. Obrigado.