CODEWITHSUNDEEP
jquerycss
meidanisalekos
meidanisalekos

Reputation: 51

Firefox Fixed Header acting like absolute

I have a fixed positioned header and when a user scrolls down the container div, the header's height changes by adding the 'header-fixed' class. It works on Chrome and Explorer 11, but in Firefox 42 doesn't. It acts like an absolute div. The weird thing is when I uncheck the "poosition:fixed" in the 'Developer Tools panel (=inspect element)' and check it again, it works...

here is my site -> http://cookandgrill.gr/preview.php

 .header {
    height: 20%;
    text-align: right;
    padding: 15px;
    box-shadow: 5px 5px 10px #000;
}

.header, .header-fixed {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 499
}
.header-fixed {
    height: 10%;
    text-align: right;
    padding: 15px;
    box-shadow: 5px 5px 10px #000;
}

Thanks

Upvotes: 0

Views: 297

Answers (2)

meidanisalekos
meidanisalekos

Reputation: 51

Thanks for your help. I found the solution: I had to put my header div element outside of the container div.

http://cookandgrill.gr/preview.php

Now seems ok.

Thanks again...

Upvotes: 0

Piotr Elmanowski
Piotr Elmanowski

Reputation: 69

Add to the header's parent element:

position: static;

So in your code it should be added to "container" and look like below (style.css, line 80):

.container {
    height: 100%;
    position: static;
    overflow-x: hidden;
    overflow-y: auto;
}

I edited it in "style editor" in dev tools and this solution fixes that bug without changing other elements' behavior. Works also fine in chrome.

Upvotes: 1

Related Questions