How should I change css style of fixed element to not crossing scrollbar

Question

I have fixed(position property) element called nav-map. I want to set max width to that element.

.nav-map{
   position:fixed;
   left: 0;
   width: 100%;
   top: 0;
   overflow: hidden;
}

but in that case it covers my scrollbar and i want to avoid that.

please, help me solve the issue

@Paulie_D content overlapping the browser's scrollbar is expected?? — PeeHaa, Jan 16 '16 at 23:41
Related - http://stackoverflow.com/questions/31860526/fixed-div-with-100-width-overlaps-scrollbar — Paulie_D, Jan 16 '16 at 23:41
i tried to set right 0 but it didnt help. Tried changing overflow properties in many ways as well but without progress. full code by link http://codepen.io/borispinus/pen/adpEWa — Boris Pinus, Jan 16 '16 at 23:45
See some examples of all the fixed navs, have `body`'s padding top to be equal to the height of the fixed nav. — Praveen Kumar Purushothaman, Jan 16 '16 at 23:48

score 0 · Accepted Answer · answered Jan 16 '16 at 23:45

The problem is that, your scrollbars are part of another div, and it would be nice, if you can bring the div below the fixed nav.

So in the <body> give a padding-top of the height of the fixed nav.

body {
  padding-top: 40px;
}

This is how I do for all the fixed navs. This is how it has been done. :) See how it looks here:

1 Answers1