Todas las soluciones anteriores codifican 40 píxeles específicamente en html o CSS de una forma u otra. ¿Qué sucede si la barra de navegación contiene un tamaño de fuente diferente o una imagen? ¿Qué pasa si tengo una buena razón para no meterme con el relleno del cuerpo en primer lugar? He estado buscando una solución a este problema, y esto es lo que se me ocurrió:
$(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'});
});
Puede moverlo hacia arriba o hacia abajo ajustando el '1'. Parece que funciona para mí, independientemente del tamaño del contenido en la barra de navegación, antes y después de cambiar el tamaño.
Tengo curiosidad por lo que otros piensan sobre esto: por favor comparta sus pensamientos. (Se refactorizará para que no se repita, por cierto). Además de usar jQuery, ¿hay alguna otra razón para no abordar el problema de esta manera? Incluso lo tengo trabajando con una barra de navegación secundaria como esta:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PD: lo anterior está en Bootstrap 2.3.2: ¿funcionará en 3.x Mientras los nombres de clase genéricos permanezcan ... de hecho, debería funcionar independientemente de Bootstrap, ¿verdad?
EDITAR: Aquí hay una función completa de jquery que maneja dos barras de navegación fijas apiladas y receptivas de tamaño dinámico. Requiere 3 clases html (o podría usar id): user-top, admin-top y 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'
});
});