0

Estou fazendo um menu navbar fixed top e quero que este menu acompanhe o scroll quando desliza a página, porém a navbar está se sobrepondo a seção logo abaixo que é o slider. Queria saber como deixa-lo na posição sem sobrepor o slider bem como deslizar juntamente com o scroll.

O jsfiddle https://jsfiddle.net/fhvo7anz/

2
  • O certo é que realmente toda navbar fixed permaneça no topo da página e acima de todos os elementos, mas você pode sobrepor a navbar com o próprio carrosel. Você pode definir propriedade de position: absolute; e talvez até um z-index. 21/01/2016 às 17:45
  • Mas oque eu pretendo é, exemplificando: que o menu fique na posição sele, sem sobrepor o carrosel e vice e versa e quando deslizarmos a página este mesmo menu siga o deslizamento estando no topo.
    – Anderson
    21/01/2016 às 17:48

1 Resposta 1

3

Cara, pra usar o Navbar-Fixed-Top precisamos atribuir um valor de padding pro elemento body, pois o Navbar no CSS fica como "position: fixed", e com esse atributo, ele não tem influência nos outros elementos da tela, ou seja, não vai "empurrar" para baixo o conteúdo.

É só acrescentar isso no CSS

/*Para dispositivos com width menor que 768px*/
body {
  padding-top: 290px;
}

/*Para dispositivos com width maior ou igual a 768px*/
@media (min-width: 768px) {
 body {
     padding-top: 220px;
  }
}

Veja como ficou: https://jsfiddle.net/fhvo7anz/5/

3
  • mas quando aplicado em resoluções diferentes (fazendo aquele joguinho de aumentar e diminuir o browser) a diferença "fixa" permanece. Como alterar isto? por exemplo, dá um saque nesse site > shapebootstrap.net/demo/html/multi aumentando e diminuindo o slider se mantem "colado" ao menu.
    – Anderson
    21/01/2016 às 18:08
  • Então, mais ou menos, né... Se você prestar atenção, ao deixar em um tamanho médio, uma parte do slider fica por trás do menu. Mas dá pra arrumar. É só você pegar os valores que o Bootstrap muda o layout responsivo e incluir com os tamanhos que cada resolução deixa o navbar. Veja: jsfiddle.net/fhvo7anz/5 21/01/2016 às 18:35
  • Verdade, tava reparando isto. Valeu pela ajuda.
    – Anderson
    21/01/2016 às 18:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .