Sticky Header

Illdy
1

How can i make the header sticky?

2

Try this CSS code, should work like a charm:

#header .top-header {
    position: fixed;
    z-index: 99;
}
3

Hi Ion! You solved another problem of mine as well, so thank you!! I want to create a sticky header as well and tried your solution. It worked for Firefox but not for Chrome or Safari. Any ideas of how I can update it so it works in those other browsers? Thank you!

4

Hi Vdeluca,

Try adding the following code to your element:

-webkit-transform: translateZ(0);

thank you,

Cristian

5

Thank you so much! One last thing- when the header is sticky, it overlaps the navigation menu in the responsive views- I’m trying to drop that down under the logo and menu icon so that I can actually click on the links but can’t seem to do it. Here’s a photo so you can see what I mean.

Thank you so much again for your help!

6

Hi @vdeluca,

Please post a new thread with your request because:

  1. We want to keep the forum easy to follow
  2. Your request could help other users as well

Thank you,

Cristian

7

Okay- I posted it here because I used the code above from this tread to make the header sticky.

Thanks.

8

ok