Website looking wrong on mobile device - Sydney

Hi there,

I’m not sure what’s changed - everything was working fine but the website now does not display properly on a mobile device - is it possible to look into this for me?

Many thanks

Alex
www.bondpictures.co.uk
on iphone7 plus

Hi,

Can you, please clarify what’s wrong on mobile? Maybe if you can, please post a screenshot about the area too, so I can clearly understand the issue.

Best Regards,
Csaba

Sure:

I guess because the logo text is black and the header is black it’s disappearing. It’s also not centering the logo either - is it possible to change this on the mobile display only?

Many thanks for your help

Alex

Hi,

How I see you’ve already changed the menu background to white, so your logo now shows up well, also how I see it’s centered too. Do you still have issues regarding this topic? Please let me know which of the above mentioned issues have still remained unresolved, so I can check.

Best Regards,
Csaba

Hi there, yes, so on a mobile device it looks ok. Actually the header is supposed to be clear - not white, how do I change it to clear?

Also there is a problem with the desktop Version when you scroll The website down a black bar appears in the header briefly and then disappears as you’re scrolling

Hi,

By clear do you mean transparent? Your header is already transparent, that’s why I’m asking. I can’t see any black bar appearing nowhere, can you, please post a screenshot about it, so I can check.

Best Regards,
Csaba

It’s ok, I think I’m getting mixed up - the mobile site looks different as the logo appears on a header rather than ovelaid on the photograph as it is on the desktop site.

Hi,

You can make the site header to overlay the image / transparent on mobiles too with this Custom CSS:

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

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

Hi there, thanks but that makes a bit of a mess, I’m afraid. You end up with the logo over laid on top of the menu and text of the header. I suspect it’s set up like it is already to avoid that :slight_smile:

Cheers

Alex

Hi,

Yes, it was positioned static by default, to avoid those issues.

Best Regards,
Csaba