Bootstrap 3 floating navbar issue

HTML & CSS
, ,
1

check this site out

make your sure screen width is enough so the navbar undocks from the top of the screen & floats about 30px below it (this happens at ~ 1000px). now watch as the carousel images change & you’ll see the problem. the carousel images don’t appear beneath the floating navbar in the ‘z’ sense (like they’re supposed to) - they actually appear directly below it (in the vertical sense). on the stethoscope image in particular you can see where the carousel image doesn’t stretch right to the top of the browser window quite clearly, cos of the color difference

i thought i’d made the carousel image ‘jump up’ so that it touched the top of the browser window but seemingly not.

anyone got any ideas? i’m a bit puzzled

2

Don’t see any problems in Chrome 46
Images appear beneath the bar

1 Like
3

mr megazoid, u r right. leastways i’ve just checked in maxthon & everything renders fine in there

[ may have to be one of those cross-fingers-&-hope-client-never-notices type things… ]

cheers anyways

4

Hi,

I can see the problem in IE and in Firefox and I believe Chrome is the one that is getting this wrong,

The problem stems from the fact that you have used a negative top margin combined with a magic number and you are getting a margin-collapse so the element you want to move doesn’t actually get moved but the margin collapses onto something else instead.

You can fix this margin-collapse by making the carousel a 100% wide float and the margin won’t collapse onto anything else (as margins on floats don’t collapse).

e.g.

#myCarousel {
    float: left;
    margin-top: -73px;
    width: 100%;
}

Generally though you should steer away from magic numbers if you can as they tie the layout to that exact number and should the nav change in height at a later date the magic number is wrong. It is much better to make this automatic and you could have absolutely placed the navbar at the top so that the carousel always starts at the top without the need for any negative margins or calculations.

Sometimes magic numbers can’t be avoided but most times they are an accident waiting to happen :smile:

1 Like
5

fabulous answer. & it works!!!

[ goes without saying that even if someone’d given me me a million years to figure that out i still would’ve been scratching my head ]

don’t actually understand yet but that’s no probs. i’ll read around it till i do

thanks a lot

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.