Fixed header on mobile

fixed header on mobile, how to do this?

Hello there,

To do that, you’ll need to add this simple CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .site-header.float-header {
        position: fixed !important;
      }
    } 

Please note that if site cache applied, you’re required to flush it, otherwise the new code addition won’t take any effect.

Regards,
Kharis

kharisblankhttp://forums.athemes.com/u/kharisblank

You are awesome!!

thank you so much!

It worked!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

kharisblankhttp://forums.athemes.com/u/kharisblank

You are awesome!!

thank you so much!

It worked!

Hi there,

I actually have the same problem…trying desperately to have a fix header on mobile and ipads, but failing. Tried to put the code that you wrote on ADDITIONAL CSS section , but it does not work though. Here is the web site http://jackbuzzzonemusic.cf

Thanks a bunch!

Jacopo

Hello there,

Viewing the source code of your site. It looks like the code has not been applied. Maybe you’ve removed it? Please keep it remains to allow me troubleshoot and correct it here from my browser.

Regards,
Kharis

Hey buddy, thanks for your response! You are right,I did remove the code…now I included it again…I replaced class name with .HEADER-IMAGE instead of .SITE-HEADER.FLOAT-HEADER, since that´s the name that I always used and it always worked. Btw, I tried with both names and does not work either. Thanks a lot, Jacopo

Hi Kharis,
so I partly solved the problem with the following code:

@media only screen and (max-width: 1024px) {
.header-image {position: fixed }
}

the problem is, it looks like the header image goes over the text when one scrolls up or down…I would like it to be like in the desktop version…

2nd problem: the image (.wp-image-673), the first pic that belongs to the text, seems to go over the header image when one scrolls down or up. I would like this picture to be like the one with 2 hands playing a chair.

Thanks a lot,

Jacopo