Sticky header covering vertical scrollbar

Question

My sticky header covers the vertical scrollbar, is there a way to fix this?

Header code (using a HTML5 tag)

header {
    background: none repeat scroll 0 0 #283744;
    border-bottom: 4px solid #4F5B66;
    height: 97px;
    margin-top: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

Is that scrollbar for the maps `iframe` or the actual page? I don't see how you can overlap a scrollbar on a webpage, not sure it's actually possible. — MackieeE, Jan 20 '14 at 10:46
It's a scrollbar for the actual page. It occurs on every page regardless of the maps iFrame being there or not. — Lysergix, Jan 20 '14 at 10:52
It cant be the browser scroll bar. Give us more code. Set up a JSFiddle. — Ruddy, Jan 20 '14 at 10:53
Is this the problem? [**DEMO HERE**](http://jsfiddle.net/md9c8/). So the text is under the header. Thats whats happening in yours right? The map is half under the header? — Ruddy, Jan 20 '14 at 10:57
Just seen it, its because you have `overflow-x: hidden;` on the body. — Ruddy, Jan 20 '14 at 11:25
Thanks, Ruddy! How would I hide the bottom scrollbar without this error occuring? — Lysergix, Jan 20 '14 at 12:32

NoobEditor · Answer 1 · 2014-01-20T11:04:03.240

0

solution is not very neat but give margin-top: 97px; to the below div....based on ruddy's fiddle :

here is a demo

edited Jan 20 '14 at 11:04

answered Jan 20 '14 at 10:45

NoobEditor

15,563
19
81
112

You didn't got his question bro :) – Mr. Alien Jan 20 '14 at 10:49
Im just going to comment because you both did. **Rawr!** Also not sure what your doing in your answer. – Ruddy Jan 20 '14 at 10:51
See the `width`, it is overlapping the scrollbar – Mr. Alien Jan 20 '14 at 10:51
No, no! Its the fixed header sitting on top if the `div` (content) below it. The OP most probs has the `div` below the header set to `height: 100%;` with `overflow: scroll;`. – Ruddy Jan 20 '14 at 10:52
@NoobEditor yap, but am feeling lazy to make one, if he provides a fiddle I will answer – Mr. Alien Jan 20 '14 at 10:54
@NoobEditor Im going to guess this is the problem. Fix this and I think it will be right. [**DEMO**](http://jsfiddle.net/md9c8/) Note how the text isn't there, because its under the header. – Ruddy Jan 20 '14 at 10:55
@Mr.Alien : okay lazy man...now i got that...damn..thought that its overlap at the edges!!! :) – NoobEditor Jan 20 '14 at 10:56
@Ruddy : yeah..got it mate....u dont need to make me feel like a *even lesser than noob* !! :) – NoobEditor Jan 20 '14 at 10:58
@Mr.Alien : `margin-top` is a solution...coz OP has fix height `header`...ur thoughts???? – NoobEditor Jan 20 '14 at 11:05

Breezer · Answer 2 · 2014-01-20T11:03:46.487

0

Yeah make that element have a higher z-index and make sure you set a positioning such as relative or what not to that element.

header {
    background: none repeat scroll 0 0 #283744;
    border-bottom: 4px solid #4F5B66;
    height: 97px;
    margin-top: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

Underlying element

#underlyingelementwithscrolls{
position:relative;
z-index:1000;/*higher than 999 since header has it*/
}

in your case you have overlayed the bodies scroller do this and it should get fixed

body{
overflow:hidden;}
html{
overflow-y:scroll;}

edited Jan 20 '14 at 11:03

answered Jan 20 '14 at 10:46

Breezer

10,410
6
29
50

please when you downvote an answer give reason to why? – Breezer Jan 20 '14 at 10:48
... maintaining equilibrium!! :) – NoobEditor Jan 20 '14 at 10:51
I didn't downvote, however the underlying element is the webpage scrollbar. – Lysergix Jan 20 '14 at 10:53
@user3214729 have added a new solution for u – Breezer Jan 20 '14 at 11:04

Mario Sanchez Maselli · Answer 3 · 2014-01-20T17:05:03.397

After reviewing your page you can change a couple of things...

Your banner is at 100% but it also has a padding which makes your banner to exeed the 100%. You try to avoid this by putting the overflow hidden in the html, body but that makes your header to overlap the scroll bar.

Solution:

html, body {
width:100%; 
overflow:hidden;  //remove this
}

#homeBanner {
width: 100%;
background: url(../img/bannerHolder.jpg) center no-repeat #558582;
text-align: center;
margin-top: 100px;
padding: 13% 2%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

Ruddy · Answer 4 · 2014-01-20T11:13:35.040

I looked at the site and a simple fix is to put:

margin-top: 97px; // if header has some padding so count that too.

Put that margin on the section in the CSS. This will fix the scrollbar but will break the logo. You will have to replace some stuff because of the new margin.

Here is a demo using the margin-top. You can see the text under the header. Take the margin away and it will hide behind the header.

DEMO

Note: Just seen there's more then 1 section. You could just wrap them all in a div and give that the margin. Or use :first-of-type.

Sticky header covering vertical scrollbar

4 Answers4