Arshad Hussain Arshad Hussain - 1 month ago 6
CSS Question

Header not fixing while scrolling in website using html/css

I have a site

http://www.cswimmigration.com/


I am trying to fix its header while scrolling but unable to find any solution.

I have added following css in stylesheet.

.gdlr-header-wrapper {
height: 150px;
left: 0;
position: fixed;
right: 0;
z-index: 99999;
}


Where gdlr-header-wrapper is a class in header tag of html.
Please help

Answer

The good news is you're not doing anything wrong! The bad news is this is a bug in Chrome:

https://bugs.chromium.org/p/chromium/issues/detail?id=20574

Basically, if an element has position:fixed and is inside another element that has transform or -webkit-transform, the fixed won't work.

The solution is to remove lines 227 - 229 from this stylesheet on your site:

http://www.cswimmigration.com/wp-content/themes/megaproject/style.css?ver=4.5.4

...or add this to your custom CSS:

body {
  -webkit-transform: none !important;
  transform: none !important;
}

Then it should work fine with the .gdlr-header-wrapper class you defined above.

Comments