Builder showing different results to Safari for Header

[DesignMunky]

Hi,

I am getting a different look in the menus of the header I’m building when viewing in Safari as opposed to the builder and chrome - see screenshots. I have cleared the cache for both browsers. Am using safari Version 16.5.2, Chrome Version 116.0.5845.96.

Thanks,
Darren.

[tristup]

Hi Darren,

Thanks for reaching out.
I have checked it in the Online Browser Testing tools, but unfortunately I didn’t find the issue described here. Can you please mention the device, operating system name, and version you are using, so we can replicate the issue at our end?

Thanks

[DesignMunky]

Hi,

I’m using a Mac 2020, running ventura 13.5.1 (22G90)
Am using safari Version 16.5.2, Chrome Version 116.0.5845.96.

Thanks,
Darren.

[marc_a]

Hey Darren,

I’ve checked all your license but I couldn’t find the right URL, would you mind sharing the link? It would also be best if you could share with us your admin credentials. To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[ruenel]

Hey Darren,

Please set the width of your Logo Image element to auto.

Kindly let us know how it goes.

[DesignMunky]

Hi Reunel,

In changing it to auto I get this extra space left and right of the logo - as per screenshot. I’d rather use that space for inline menu as I had previously…

[marc_a]

Hey @DesignMunky,

To fix your issue using the Mac Venture Safari browser, you need to set the max-width of your logo. Since the current width of your logo on the front end is 200px, I added a max-width of 200px.

In the safari view, it is now showing correctly.

Hope that helps.

[DesignMunky]

Hey Marc,

Many thanks for this. Is this something I need to be aware of in future for this type of layout? Is there any reason why it orignally worked without the Max width on chrome but not on safari?

Cheers
Darren.

[marc_a]

Hey Daren,

I suspect that this issue only occurs using the Safari browsers, they get the max width of your logo that’s why there is a bigger space on the left and right. I could say that it would be best to check all the browsers on your future build.

Hope that helps.