0

I am using this bootstrap template for my new project ( http://www.bootply.com/render/96266 ) I am much satisfied with the design metrics, the only small problem I am facing is that the navbar which is static-top is overlapping the scrollbar.

I tried changing navbar to fixed-top but still it overlaps the scrollbar.After lots of troubleshooting, I found out that .column class has overflow:auto and that is causing the problem. When I decided to use overflow:hidden / scroll / inherit but the result was not what I expected.

Can someone help with this?

JSFiddle : http://jsfiddle.net/YHRwA/2/
CyberWizard
  • 33
  • 3
  • 8

3 Answers3

1

Your answer is right in the docs:

When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the . Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS

See here

Community
  • 1
  • 1
newTag
  • 2,149
  • 1
  • 22
  • 31
  • I tired your suggestion it didnt help, would love if you could check out the fiddle :http://jsfiddle.net/YHRwA/2/ – CyberWizard Mar 21 '14 at 14:14
0

does your element have a z-index applied? This allows the rendered elements to be arranged with a 'depth' of display [what goes above what]

Migisha
  • 415
  • 4
  • 10
0

They have one main div which is positioned in way that it will span the whole height & width of the browser view-port (top:0;left:0;right:0;bottom:0} & all content is then positioned inside that div. The name is .box.

Then there is another container, the class applied to that div is .column & it has overflow set to auto. So the scroll bar is not actually of the browser but of this div & All of them are set height to 100%, this will take up the viewport height & width.

Now browser default scroll bar width changes browser to browser. So I guess you've to entirely redo the HTML.

To resolve it fast you can remove the bottom:0 of the box.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Suraj Naik
  • 509
  • 4
  • 7
  • Hi Suraj, thanks for that reply, i think redoing the entire HTML is solution as the fast resolution also doesnt work . – CyberWizard Mar 21 '14 at 16:11
  • Ok. Do they have any support? They must have done with some purpose. This logic may have something to do with the mobile device output. – Suraj Naik Mar 23 '14 at 08:22