Fixed Header jups

I’m struggeling with my header setting. Want to keep the header on a mobile device fixed at the top. Found some code snippets from Kharis here on the forum but it seems something (tiny) is still wrong. When you start scrolling on a mobile device the header for unknown reason starts moving and then jumps back to the proper position. I guess it’s just a tiny hickup in my CSS but I’ve now been trying for hours to find it - without success.Maybe there’s a quick solution available.

The page: www.poetryman.de

Thnaks in advance for your help.
Cheers, Timo

Hi Timo,

Thank you for contacting us.

Seems likely I don’t see the issue when checking here. Have you been able to resolve it by yourself?

Or, perhaps, you’ll need to share a video recording to better help me to understand your problem correctly?

Regards,
Kharis
aThemes Support

Thanks for your reply Kharis,
attached is a link to the video video showing the effect. You see that the header first moves up when scrolling down and than sets as fixed on top of the screen.

https://www.timobierbaum.com/cloud/index.php/s/njn92kCLaBT2TPk

Hi,

Thank you for sharing the video.

If I could get it right, you’d add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .siteScrolled .site-header .site-logo,
      .site-header.float-header .site-logo {
        max-height: 100px;
      }
    }

Regards,
Kharis
aThemes Support

Hi Kharis,
thanks for the code (was a slight change to what I had before already). The problem somehow still remains. When I scoll on the mobile the large logo starts moving up and than suddenly changes into the small logo and gets the semi-transparent background I chose (I change the 100px to 50px so the logo doesn’t take up to much space in mobile design).
will have to go on searching for the problem …
Cheers, Timo

Hi Timo,

Thank you for getting back. Try this code:

    @media only screen and (max-width: 1024px) {
      .siteScrolled .site-header .site-logo,
      .site-header.float-header .site-logo {
        max-height: 100px !important;
      }
    }

Regards,
Kharis
aThemes Support

Sorry, Kahris, I don’t see the difference to the code you suggested before … maybe I’m a bit “blonde” …

Sorry, I hit the send button too soon.

Try this:

    @media only screen and (max-width: 1024px) {
      .siteScrolled .site-header .site-logo,
      .site-header.float-header .site-logo {
        max-height: 100px !important;
      }
    }

Regards,
Kharis
aThemes Support

Hmm, I added the “!important” bit … stil no change :frowning: