Hamburger Menus Are Skewed Across All My Sites

Support
#5

Hi Support

This is the same issue I had (and am still having) here: https://theme.co/apex/forum/t/urgent-burger-menu-issue-desktop-browser/57921

Can we please have some further assistance/investigation here? It’s now officially not just related to a single user.

It seems it’s only showing at the ‘Developers’ end, and only in Chrome. It’s only occurring on sites I’ve built using Pro, and shows in both regular and incognito Chrome.

I’m personally at an absolute loss as to why it’s occurring. Have disabled all Chrome extensions (as requested), cleared caching, and it’s still showing skewed burger menus.

To note - the ‘more vertical’ Graphic Toggle works fine. It’s the Burger Toggle that is the issue it seems.

Also - haven’t been using Breeze caching / CDN etc with most of these sites as their still in Dev phase.

It’s good to know it’s rendering correctly on other instances/browsers - but its super frustrating to not be able to see the correct render at the Dev end.

Thanks
Sam

#6

Hi Sam,

Thank you for your message, and we do understand that you have a similar case problem. But unfortunately we are not able to handle multiple customers on teh same thread. We do suggest that you keep an eye on this thread but we insist that you follow up the case in your respective thread that you opened.

Please continue engagement there and we will be more than happy to follow up.

Thank you for your understanding.

#7

Mate, my thread is too old to reply.

I’m not asking to handle multiple customers on the same thread, I’m just advising the issue isn’t specific to a single user, it’s occurring across multiple users.

I’d like this issue resolved at my end, and everyone else’s end. Thus the communication.

I’ve also provided additional information related to the issue at hand, which would likely be helping you guys determine a resolution… which I’m sure @DannyC is looking for as well.

I also note when I view Danny’s site it’s showing the same skewed Burger icon:

Sam

#8

Hello Sam G,

When I checked your site, I am seeing this:

@DannyC:
I am not seeing any issues in your site either.

One thing I know is that both of your sites are using Breeze Cache which could be the cause of the issue. Please keep in mind that Since you have installed a caching plugin Breeze Cache, please clear your plugin cache and regenerate the minified JS/CSS files before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

@grannysam11:
We may continue that conversation in your own thread to avoid confusion?

Thank you.

#9

RueNel

As mentioned, my thread is already closed so I can’t reply in it. And this is the exact same issue anyway.

I don’t know how else to explain this…

  • I know the Burger Menu works everywhere else, and in live environment. It’s a simple check with a mobile phone to see this.
  • When in Chrome (the dev browser I’ve used to create Pro sites) I’ve cleared all caches on impacted sites, removed Breeze, loaded in incognito etc etc etc, to no avail.
  • It still shows a screwed up Burger Menu in the Chrome browser that is used for Development within Pro - whether logged into the site or not
  • You can also see above, that when I load up Danny’s site in the same browser it also shows a screwed up Burger Menu, even though I’ve never loaded it before or developed it.
  • When I load Danny’s site from my phone and it loads the Burger Menu totally fine.
  • There is ZERO previous caching related to Danny’s site at my end - it was the first ever time I loaded the site, and the burger menu is still screwed up in Chrome.

It’s as though there is something that begins impacting the Chrome Browser when using Pro that then affects the Burger Menu rendering only?? Even other peoples site’s that are developed with Pro are rendering it wrong.

Is there any sort of debugging information from my Chrome Browser or something similar that I can provide to try and assist in resolving this?

Thanks
Sam

#11

Hi Sam,

I followed up the case on the thread in question and now you can reply there.

As I mentioned before unfortunately we can not give you support in another thread. You can learn more about our terms of support here:

Thank you for your understanding.

#12

I AM DISCUSSING THE SAME BUG/ISSUE
I CANNOT REPLY IN THE OTHER THREAD

This is super frustrating…

Do you even read what I’m writing?? I’m referring to Danny’s site as well.

Please just assist in resolving the issue at hand.

Danny’s site - On my Mobile:

Danny’s site - On my Chrome Browser that uses Pro for website dev:

Clearly you can see there’s an issue rendering the Burger Menu in the Chrome Browser properly. As previously mentioned, this could be because of a bug in Pro that leaves something behind in Chrome (or something similar) that continues to render Pro Burger Menu’s incorrectly.

Is there anything I can provide from Chrome to assist in determining what it might be?

Sam

#13

Hello Sam,

The issue only exists in your Chrome browser.
This is what I am seeing:

Please clear your Chrome browser’s cache or use incognito mode and test the site again.

#14

I have already mentioned I’ve tried this already. Multiple times…

Can you please take the time to properly read what I’ve written already, as I’ve been spending quite a decent amount of time trying to resolve this - so have tried multiple things.

Danny’s site in incognito:

AGAIN:
Is there anything I can provide from Chrome to assist in determining what it might be?

Sam…

#15

Hello Sam and Danny,

Yes, I can confirm the issue that the burger menu is large. We’re sorry it take this long, but it seems this is device specific and I am the only one who can see it from the team. So I made some investigation and I found out that yours and my device calculation of EM CSS unit is different from the others. Using same EM value, our chrome browser is showing different computed values to others. Can you try editing toggle value settings and then use PX unit instead of EM? For the thickness of each bar, try adding this custom CSS on your header:

.x-toggle-burger{
    height: 5px; /*This is set to 1em by default. Adjust it to your preferred bar thickness*/
}

Please try this and let us know so we can check. If this changes will show the same result on all other browsers, we can confirm the root cause of the issue. Thank you.

#16

Hi @Lely ! Firstly, thanks so much for taking the time to properly investigate the issue at hand!

Regarding the em/px adjustment to the Burger Toggle - I had previously adjusted all of my Burger Toggles to px measurements already, as there was a bug previously where the Burger Toggle would show enlarged (similar to what we’re currently seeing) in the Instagram built-in Browser. So when users click a website link from Instagram, the Burger Toggle would show enlarged/skewed. The workaround was to change all Toggles to measure in px instead of the default em.

Therefore, for one of my sites (that has been mentioned above) - the Burger Toggle is already set at a px measurement (per below screenshot), but is rendering skewed on the Chrome browser still:

Once I then put in your hard-code (2px height) the toggle does change to render better - see incognito below:

But Danny’s site doesn’t change still (per below) - but it’s still rendering fine on my mobile device:

The hard-code you have provided is only a fix for the specific website at hand - as opposed to the broadscale Chrome browser issue that we’re facing for Pro sites.

I still don’t get why Danny’s site would render okay on Mobile Chrome, but then not at all correctly on Desktop Chrome - when no settings have changes whatsoever.

Only thing I can think of is that Pro is placing some remnant code or settings into the Desktop Chrome which alters the rendering of the Burger Toggle across all Pro sites from that Browser…?

Thanks
Sam

#17

Hey Dan and Sam,

I’m sorry I currently don’t have a solution to offer since I could not replicate the issue. The Burger icon displays fine in my Android Chrome phone and desktop Windows Chrome.

It looks to me though that the browsers having this issue does have a scaling problem in desktops and laptops with pixel density higher than 1 but not a whole number like 1.2. My phone has 2.6 DPR yet the burger button is displaying fine. This might explain why it works in Mobile Chrome but not in Desktop Chrome with high pixel density. Please remember that this is not happening to all Desktop Chrome browsers. This is a device specific issue. An example of such a device is a 15 inch Full HD Laptops.

With that said, I’d would like to ask that you visit this site: https://bjango.com/articles/min-device-pixel-ratio/. Then, provide us with a screenshot of the device data that will be shown in the screen like the user in this thread. If I may, I also would like to kindly ask if you’re having a similar issue in that thread.

Regarding the code Lely gave, that is a temporary workaround. We will need to gather more data and support for devices with that said issue would be decided by our development and leadership teams.

Thanks.

#18

Hi @christian_y - thanks for the clear reply

All okay that you currently don’t have a solution - at least we’re now on the right path to potentially resolving it.

Your theory that it could be a scaling / pixel density issue sounds like a decent one. I’m personally a bit at a loss as to what it might be, but I’m not a super technical developer per se…

The pixel ratio of one of my screens (regular monitor):

Pixel Ratio of my Macbook Laptop:

To Note - BOTH SCREENS are showing a skewed/enlarged Burger Menu for Danny’s site in incognito mode.

Regarding the issue of the Gap Element on the other thread - I’m not actually sure what the exact issue is? I can’t see any Gap Elements showing in the video or screenshots in the thread - hard to tell what I need to look for. Might be missing something…

Thanks
Sam

#19

Hi Sam and Danny,

We are still investigating that issue. For Danny’s site, this might work:

Using that value, I can see it is not skewed on my end. We need to confirm if that setting will work on you too.

The issue with the GAP that we are investigating is likely the same in terms of display. On other devices it displaying as expected and then on others not and yes, DPR is what we have found the same on devices where it is not working. Thanks.

#20

Hi @Lely

I don’t think Danny is going to respond. Is there anything I can test on one of my sites? Is it something to do with having to use EM measurements?

If this is the case, then this skews the burger menus on alt-browsers such as the internal Instagram browser.
Per a ticket I raised last year - Using px measurements was resolving that issue:

Thanks
Sam

#21

Hey Sam,

It currently looks like there’s a difference in EM unit output between a standard screen or device and the device you’re using and it behaves like the Instagram and Facebook browser.

Here’s a similar thread and I advised to try the PX unit. See https://theme.co/apex/forum/t/whats-wrong-with-my-hamburger-menu/60269/4?u=christian_y

The code Lely provided previously by the way is PX based.

May we also ask the device model you’re using in order to give us more context?

Thanks.

#22

Hi @christian_y

I think you might be confusing things…?

Per Lely’s latest comment above - in the screenshot it is suggesting an EM measurement for the Burger Toggle.

Also, my response isn’t specific to the Instagram browser issue - I mentioned that because of the previous issues we’ve had with EM measurements for Burger Toggles. I’m focussed on resolving the current issue at hand.

Regarding the issue at hand (the skewed rendering of Burger Toggles in some Chrome browsers) - do you need me to do anything to assist in the investigation and resolution?

FYI - Device model is latest Google Chrome browser.

Also to note, I have responded already to Lely’s comment you have shown above. That option doesn’t resolve the issue in its entirety.

To re-confirm the issue:
My chrome browser (and Danny’s and Lely’s per above) are rendering a skewed Burger Toggle for some reason across all Pro sites (managed or not managed by the relevant user). This skewing does not take place on mobile - only the Chrome Browser that has used Pro to develop websites.

@Lely - what do you mean by:

Thanks
Sam

#23

Hey Sam,

Sorry if my reply confuses you but no, I’m not confusing things.

Yes, I knew this and this doesn’t work like the other thread I mentioned and this is why I suggested using a PX unit instead of EM.

Yes, that’s why I mentioned that Chrome in your device behaves like Instagram and FB browser so the PX unit might work also.

This is not required but might be handy if we know the device model. Google Chrome is a browser. The device model is something like Lenovo 510 laptop like what Lely has.

Yes, it doesn’t but it at least made the burger a little bit better. I just highlighted that the unit used in the code is PX.

We’re currently investigating this issue with Lely as she’s the only one who could replicate this. That is what she meant by:

Please stay tuned for updates.

Thanks.

#24

Thank @christian_y , but I’ve already advised previously in this thread that I’m already using PX measurements for my Burger Toggles - and still have the issue - per above screenshots for Callery Building. Thus why it was somewhat confusing, and kind of going round in circles a little.

Apologies, the device model I’m using is:
MacBook Pro (Retina, 13-inch, Early 2015)
MacOS Mojave (Version 10.14.5 (18F132))

Yep, already using PX measurements, and still have the issue on the Chrome Browser.

Thanks for continuing to investigate, and let me know if you need me to do anything further. More than happy to help, to get this resolved.

Thanks
Sam

#25

Hi Sam,

I am sorry for the confusion.

Yes, on my previous suggestion using EM, I forgot the fact that when we adjust it to a value that is perfect on your screen and mine, means it will be too small on others. Using PX, we have found out that the difference is not as much as using EM unit but yes, generally the difference is still unacceptable.

We do understand this is a vital concern and we are trying to fixed on next cycle. We’re still sorry for the incovenience, but at the moment, using PX is the available temporary solution. Thank you.