Arshad Hussain Arshad Hussain - 3 years ago 82
CSS Question

Header not fixing while scrolling in website using html/css

I have a site

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 Source

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

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:

...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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download