Main menu issue in Safari

Hey @bigopensky,

thank you for choosing Bento!

Please check the following as the first step of searching for the possible cause:

1. Make sure the zoom level in Safari is set to 100%
2. Set the scaled resolution factor to “default” in the OS settings

Let me know how the website looks after that; it would also help if you could provide a full-size screenshot of the browser window in Safari, displaying how the theme looks there. Thanks for your patience!

Sincerely,
Andrii / Satori Studio

Hi Andrii,

thanks for hint, I checked the settings, they were set to 100% and default.
But anyway I started to play with this settings and found a strange feature.

First when I open new window in Safari I scale it to 100% with cmd+0 (just to be sue it is really true), then I go to Bento demo page (or my page) and I see “Hamburger” menu.
When scaled down with cmd+- menu looks ok. Going back to 100% with cmd+0 or cmd++ menu still looks ok, like normal menu.
Going one step up (zoom level) with cmd++ I see “Hamburger” menu, what is expected. But going back to 100% with cmd+0 or cmd+- I still see “Hamburger” menu.
So obviously the problem is when 100% zoom level is set by default when opening new window (probably most users use this setting) or when scaling down to 100% from higher zoom level.

In Firefox it works at 100% zoom level anytime no matter how (from which side higher/lower) zoom level is set.

I also checked it on another computer (MacBook air 15′ which is non retina) and it works the same. The only difference is that on this computer at 100% zoom level in full screen mode it works ok. On mine it doesn’t.

Otherwise Bento with Expansion pack is exactly what I was looking for but this “feature” is disturbing. “Hamburger” menu on a normal screen is not good.

Probably with change of one setting in css would work, or? Any further idea?

Hey @bigopensky,

thank you very much for the detailed observations! Could you please check one more thing – namely the default font size setting for Safari (this might also affect the scaling since all sizes are ties to “rem” units in Bento, following the best practices in responsive and scalable design). This tutorial gives the idea on where to check it, the second part which says “Set the text size for all web pages you visit”. The screenshots look dated (I’m not a frequent Mac OS user, so it’s a hunch ?? but they should give an approximate idea as to where to search for it.

Sincerely,
Andrii / Satori Studio