twitter bootstrap navbar fixo top site sobreposto

347

Estou usando o bootstrap no meu site e estou tendo problemas com a parte superior fixa da barra de navegação. Quando estou apenas usando a barra de navegação normal, está tudo bem. No entanto, quando tento alterná-lo para a parte superior fixa da barra de navegação, todo o conteúdo do site muda como a barra de navegação não está lá e a barra de navegação se sobrepõe. aqui está basicamente como eu a expus:

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

Eu tentei copiar exemplos de bootstraps exatamente, mas ainda tendo esse problema apenas ao usar o navbar Fixed Top. O que estou fazendo errado?

html twitter-bootstrap Matthew Berman
fonte

Respostas:

527

Sua resposta está correta nos documentos :

Preenchimento do corpo necessário

A barra de navegação fixa sobrepõe seu outro conteúdo, a menos que você adicione paddingà parte superior do <body>. Experimente seus próprios valores ou use nosso snippet abaixo. Dica: por padrão, a barra de navegação tem 50 px de altura.

body { padding-top: 70px; }

Certifique-se de incluir isso após o CSS principal do Bootstrap.

e nos documentos do Bootstrap 4 ...

As barras de navegação fixas usam position: fixed, o que significa que são extraídas do fluxo normal do DOM e podem exigir CSS personalizado (por exemplo, padding-top no) para evitar sobreposição com outros elementos.

rfunduk
fonte
16
Mas quando você minimizar a janela é exibida navbar após 40px como devo lidar com isso ..
Aravindhan
5
Aparece após 40px provavelmente porque você não "adiciona isso após o CSS inicial do Bootstrap e antes do CSS responsivo opcional".
22412 Collimarco
11
Essa resposta é verdadeira, mas só funciona bem quando você transforma o preenchimento de 40px em um estilo responsivo. Consulte a resposta de Dan ou Nick.
quer
11
Veja a resposta de @ qub1n se você não deseja adicionar preenchimento (ou qualquer outra coisa).
scharfmn
2
@JerSchneid O exemplo para navbar-fixed-top em w3schools.com mostra o mesmo comportamento. Estou inclinado a chamar de bug.
Tony Martin
125

Como outros já disseram, adicionar um top de estofamento ao corpo funciona muito bem. Mas quando você torna a tela mais estreita (para as larguras do telefone celular), existe um espaço entre a barra de navegação e o corpo. Além disso, uma barra de navegação lotada pode quebrar em uma barra de várias linhas, substituindo parte do conteúdo novamente.

Isso resolveu esses tipos de problemas para mim

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

Isso cria um preenchimento de 40px por padrão e 0px com menos de 768px de largura (que, de acordo com os documentos do bootstrap, é o ponto de corte do layout do telefone celular onde a lacuna seria criada)

Nick Bisby
fonte
11
Essa solução também varia entre o CSS principal do Bootstrap e as importações responsivas de CSS? Ainda estou vendo a lacuna quando a largura da janela é menor que 980. Suponho que a importação posterior das substituições de CSS responsivas. Se eu mover essa solução sob a importação CSS responsiva, ainda recebo o preenchimento do corpo, além de uma linha extra na barra de menus.
Slothbear
Estou usando o Twitter Bootstrap 2.3.2. Percebi que o documento não contém mais a sugestão de 40px, embora a necessidade ainda exista.
Slothbear
11
A sugestão de 40 pixels ainda está lá, apenas mudou. Desculpe pelo spam do comentário.
Slothbear
3
por Bootstrap 3. + body { padding-top: 40px; }é suficiente
andilabs
8
Esta solução está no caminho certo. Simplesmente colocar preenchimento no corpo, conforme documentado, não é suficiente, mesmo no 3. +. Com a combinação certa de consultas de mídia, o efeito desejado pode ser alcançado à medida que a barra de navegação é encerrada com o redimensionamento do navegador. No meu caso, preciso alterar o preenchimento nas larguras de 1148px, 900px e 768px.
John McCann
34

uma solução muito mais útil para sua referência, funciona perfeitamente em todos os meus projetos:

mude sua primeira linha de

.navbar.navbar-fixed-top

para

.navbar.navbar-default.navbar-static-top
catsky
fonte
11
você está apenas trollando? ou eu supervisionei alguma coisa?
chyno 14/07/16
Como isso conseguiu 10 votos positivos? navbar-default apenas adiciona cor e cor de fundo ...
Denny Mueller
2
navbar-static-top é a mudança e funcionou para mim. Obrigado!
precisa saber é o seguinte
11
navbar-static-top também corrigiu isso para mim. Menos intrusivo.
Xpagesbeast
3
Isso funciona se você não precisar que a barra de navegação esteja sempre visível na parte superior da tela. O navbar-static-top não é fixo, ele rola com a tela. Isso exemplifica os diferentes estilos da barra de navegação: getbootstrap.com/docs/3.3/examples/navbar-static-top #
Victor Ionescu
26

Esse problema é conhecido e há uma solução alternativa no site de inicialização do twitter:

Ao afixar a barra de navegação, lembre-se de levar em conta a área oculta abaixo. Adicione 40px ou mais de preenchimento ao <body>. Adicione isso após o CSS inicial do Bootstrap e antes do CSS responsivo opcional.

Isso funcionou para mim:

body { padding-top: 40px; }
davidrac
fonte
9
Mas quando você minimizar a janela é exibida navbar após 40px como devo lidar com isso ..
Aravindhan
11
Sim, esta solução não funciona bem em tamanhos de tela para celular. De fato, no modo de tela ampla no meu telefone, basicamente torna o site inútil.
quer
que CSS responsivo opcional? Eu já usei apenas um CSS de bootstrap (principal) - estou falando acima da versão 3.7.x UPWARDS; foi dividido em diferentes CSS's anteriores à versão 3.7.x?
Joedotnot 17/11/19
26

@ Ryan, você está certo, codificar a altura fará com que ela funcione mal no caso de barras de navegação personalizadas. Este é o código que estou usando para o BS 3.0.0:

$(window).resize(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);         
});
Aram Paronikyan
fonte
3
Em vez de usar parseIntos valores css da altura, usei apenas $('#main-navbar').height(), mas, caso contrário, isso foi muito útil e resolveu meu problema, obrigado.
precisa saber é o seguinte
A menos que sua barra de navegação tenha altura fixa, é disso que você precisa.
CraigP 07/11
21

Coloquei isso antes do contêiner de rendimento:

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

Eu gosto dessa abordagem porque documenta o hack necessário para fazê-lo funcionar, além de também funcionar para a navegação móvel.

EDIT - isso funciona muito melhor:

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}
Dan
fonte
16

O problema está no navbar-fixed-top, que cobrirá seu conteúdo a menos que especifique o preenchimento do corpo. Nenhuma solução fornecida aqui funciona em 100% dos casos. A solução JQuery pisca / desloca a página após o carregamento da página, o que parece estranho.

A solução real para mim não é usar navbar-fixed-top, mas navbar-static-top.

.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
Tomas Kubes
fonte
11
Sim, é melhor, porque o preenchimento do corpo é dinâmico para cada tamanho de tela, sua solução não é boa.
Ronen Festinger 31/03
Mas há uma faixa de espaço em branco em branco acima da barra de navegação.
user2075599
16

Como postei em uma pergunta semelhante, tive sucesso com a criação de uma barra de navegação não fixa simulada antes da minha barra de navegação fixa real.

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

O espaçamento funciona muito bem em todos os tamanhos de tela.

Jason Butler
fonte
É isso que fazemos .. coloca o conteúdo do corpo exatamente no local correto, sem nenhum código js, ​​suposição ou qualquer coisa. .
21316 FredArters
11
Thid merece muito mais votos positivos, Funciona perfeitamente bem, é feio como o inferno, mas apenas o código: D
JRsz
Obrigado, esta é uma solução muito mais elegante do que top de preenchimento ou margem pixels e outras coisas ...
Pedro Reis
3
Infelizmente, isso não funciona para dispositivos móveis quando as navs entram em uma coluna.
Pedro Reis
16

A solução para o Bootstrap 4, funciona perfeitamente em todos os meus projetos:

mude sua primeira linha de

navbar-fixed-top

para

sticky-top

Referência da documentação do Bootstrap

Sobre o tempo que eles fizeram isso direito: D

Rick
fonte
Algumas pessoas podem usar a parte superior fixa para ver os links enquanto você rola a página; embora esse recurso pode ser útil se você não se preocupam com isso :)
knowledge_is_power
Observe também que .sticky-top usa position: sticky, que não é totalmente suportado em todos os navegadores.
live-love
14

Todas as soluções anteriores codificam 40 pixels especificamente no html ou CSS de uma maneira ou de outra. E se a barra de navegação contiver um tamanho de fonte ou uma imagem diferente? E se eu tiver um bom motivo para não mexer com o estofamento do corpo ? Eu tenho procurado uma solução para este problema, e aqui está o que eu vim com:

$(document).ready(function(){
    $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
    $(window).resize(function(){
        $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});

Você pode movê-lo para cima ou para baixo ajustando o '1'. Parece funcionar para mim, independentemente do tamanho do conteúdo na barra de navegação, antes e depois do redimensionamento.

Estou curioso para saber o que os outros pensam disso: compartilhe seus pensamentos. (Será refatorado para não repetir, aliás.) Além de usar o jQuery, existem outros motivos para não abordar o problema dessa maneira? Eu até consegui trabalhar com uma barra de navegação secundária como esta:

$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
        + $('.admin-nav').height() + 1 )+'px'});

PS: Acima está no Bootstrap 2.3.2 - funcionará no 3.x Enquanto os nomes genéricos de classe permanecerem ... na verdade, ele deve funcionar independentemente do bootstrap, certo?

EDIT: Aqui está uma função jquery completa que lida com duas barras de navegação fixas responsivas empilhadas, de tamanho dinâmico. Requer 3 classes html (ou poderia usar IDs): user-top, admin-top e contentwrap:

$(document).ready(function(){

    $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
    $('.contentwrap') .css({'padding-top': (
        $('.user-top').height()
         + $('.admin-top').height()
         + 0 )+'px'
    });

    $(window).resize(function(){
        $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
        $('.contentwrap') .css({'padding-top': (
            $('.user-top').height()
             + $('.admin-top').height()
             + 0 )+'px'
        });
});
Ryan
fonte
Apenas para sua informação, estou usando isso e funciona muito bem, mas por algum motivo estranho, se eu tiver duas barras de navegação, um tamanho normal e outro para telas pequenas, só funciona na tela maior?
NaughtySquid #
@LiamDawe, talvez você tenha mais de um '.user-top' (por exemplo) na página; nesse caso, o .height () pode ficar confuso ...?
Ryan
14

Apenas mude fixed-topcom sticky-top. Dessa forma, você não precisará calcular o preenchimento.
E funciona !!

Shivam Agrawal
fonte
4
Conforme BS4, esta deve ser a resposta correta. +1
Pedro Sousa
11

Para manipular linhas de quebra automática na barra de menus, aplique um ID à barra de navegação, assim:

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

e adicione este pequeno script na cabeça depois de incluir o jquery, assim:

<script>
    $(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        });
    });
</script>

Dessa forma, o preenchimento superior do corpo é ajustado automaticamente.

Oliver Konig
fonte
Eu tive que mudar a segunda referência para height no seu exemplo para $ ('# topnavbar'). Height () e isso funcionou perfeitamente para mim. Obrigado!
notruthless 28/05
11
Obrigado pelo comentário! Eu consertei na resposta.
Oliver Konig
Esta é a melhor solução que encontrei que funciona no PC, iOS, Android - todos os dispositivos. Todos os outros são valores de pixel codificados ou muito longos e não funcionam em todos os dispositivos.
Homem Oracular
Ótima solução. Eu estava tendo algumas pequenas compensações que não estavam sendo levadas em consideração no cálculo. Eu acho que foi porque minha barra de navegação estava tendo algumas margens. Eu escolhi alterar a chamada height () para uma chamada outerHeight () para levar isso em consideração.
Leonardo Santos
4

para o Bootstrap 3. +, eu usaria o CSS a seguir para corrigir o problema sobreposto navbar-fixed-top e o salto de âncora sobreposto com base em https://github.com/twbs/bootstrap/issues/1768

/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
  body { padding-top: 40px; }
}

/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}
gasolina
fonte
Mesmo problema, boa resposta.
McGrady
2

use essa classe dentro da tag nav

class = "navbar navbar-expand-lg navbar-light bg-light pegajoso "

Para bootstrap 4

Kynginthenorth
fonte
Eu nunca vou saber por que foi rebaixado, pois estava funcionando para mim e para todos os outros.
Kynginthenorth 13/03/19
Isto está correto. O único problema é que, nos documentos, que dizem "A posição .sticky-top utiliza o utilitário da CSS: pegajoso, que não é totalmente suportado em todos os navegadores"
José
1

Tudo o que tem a fazer é 

@media (min-width: 980px) { body { padding-top: 40px; } }
Venkat Kotra
fonte
0

Seguindo a resposta de Nick Bisby, se você encontrar esse problema usando o HAML nos trilhos e tiver aplicado a correção de Roberto Barros aqui:

Substituí o requisito no "bootstrap_and_overrides.css" para:

= requer twitter-bootstrap-static / bootstrap.css.erb

(Consulte https://github.com/seyhunak/twitter-bootstrap-rails/issues/91 )

... você precisa colocar o CSS do corpo antes da instrução exigir da seguinte maneira:

@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

Se a instrução require estiver antes do CSS do corpo, ela não entrará em vigor.

danielmbarlow
fonte
0

Eu faria isso:

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

Isso deve garantir que o bloco de navegação não estique a página inferior e cubra o conteúdo da página.

developer10
fonte
-4

Acabei de enrolar a barra de navegação em um 

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

Nenhum hocus pocus chique, mas funcionou ..

TTbooster
fonte
Sua resposta não é clara e não resolve o problema. O que nav-? ??representa?
Fragilewindows 07/12