Header-Picture on Mobile

Inquiry: Dear friends, I have a problem with the Sydney Theme and can’t find a solution. Maybe someone can help me? The problem: The header type is “picture”. A picture is uploaded under header media. On the desktop everything is fine, on every phone the picture disappears after scrolling up and is NOT visible anymore. My question: How can I “glue” the header image on top?

Thanks for every answer and greetings from Hamburg! FRANK

Translated with www.DeepL.com/Translator (free version)

Hello Frank, can you please provide a link to your website in order to let me check it?

You can use some link shortener if you don’t want to leave the link to your site in this topic.

Kind Regards, Roman.
aThemes Support

Hi Roman, thanks for your answer. Here the Link: https://t1p.de/47z5

FRANK

Hello Frank, thank you for the link.

I’ve just checked your mobile header and saw that the image is okay, so is this issue already resolved?

Kind Regards, Roman.
aThemes Support

Hello, Roman,

thank you for your answer and greetings from Germany. The problem still exists. Here is a screenshot from my mobile phone, on the left side you can see the header photo, framed in red. When I scroll up (right side of the picture), it disappears upwards. I can’t get it fixed at the top of the browser border.

Thanks for your answer!

FRANK

Hello Frank, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (max-width: 1024px) {
    #content.page-wrap {
        padding-top: 0;
    }

    #masthead .site-logo {
        margin-top: 100px;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Dear Roman,

thanks for your help!!! I used the code, but unfortunately the image in the header still disappears when scrolling the page on a mobile phone. On the desktop everything is fine.

Best regards

FRANK in Hamburg

Hello Frank,

I’ve just checked your website on Android 9 phone in Chrome browser and your logo image is okay. Can you please specify the affected device and browser? Also, did you try to clear your browser cache?

Kind Regards, Roman.
aThemes Support

Hello, Roman,

have deleted all browser data. Yesterday, too. Open the site on Galaxy A3 (2017), Android version 8.0.0. The chrome version is 80.0.3987.87.

But the red-blue image still disappears. I also changed the values you mentioned, unfortunately without success.

Greetings FRANK

Hello Frank,

I asked our Developer to check your issue, let’s see what he says.

Kind Regards, Roman.
aThemes Support

Hi Roman,

good idea, and thank you very much!

FRANK

Okay Frank,

It looks like you expect your header to be sticky on mobile devices. But it’s always static by default on mobile devices, because it can take too much space in landscape orientation.

Kind Regards, Roman.
aThemes Support

Dear Roman,

and if I would like to adjust the picture (tentatively) once statically, where do I do that? I have tried #masthead .site-logo { margin: 0; position:sticky; }, but it does not work.

Thanks a lot!

Frank

Hello Frank,

if I would like to adjust the picture (tentatively) once statically, where do I do that?

I’m not sure what exactly you want to do, can you please describe it more precisely?

Kind Regards, Roman.
aThemes Support