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'
});
});