Hamburger Menus Are Skewed Across All My Sites

Support
#1

Hi,

After doing routine maintenance on my client sites, it’s become apparent that the Pro Header Hamburger Menu Buttons are all not displaying correctly and there no longer seems to be the options in the Pro Header interface to tweak this anymore.

  • We used to have options for the individual width of the burger lines
  • We used to have options on how far apart each line should be
  • We used to have a lot of other responsive options

All of these seem to be gone now and we have some basic options for burger, grid, more vertical, more horizontal.

All of the refinement seems to have gone and now it’s basically messed up all of my mobile menu toggles across each site in Chrome browser.

I can’t seem to find anything in your update logs about this, so a bit baffled as to why this is the case now.

Please take a look at the screengrabs attached.

Skewed toggle:

How it is meant to appear:

Note > This only appears to be happening in Chrome (Firefox, Opra & Edge all work fine)

Check out one of the live sites here > https://befairmarketing.co/

Thanks for your help here

Dan

#2

Hi Dan,

Thanks for reaching out.

The theme doesn’t turn off features based on the browser being used, I checked on chrome and it works pretty well. Or are you referring or loading the builder within the mobile browser? The builder weren’t meant to be used within any mobile browsers. All should be build within a desktop/laptop computer.

They aren’t skewed on my view either using chrome (mobile and desktop).

And are your referring to this setting? It still there

That might also be related to cache, so please turn off your Breeze or Cloudways cache and test it again, but make sure browser cache are cleaned as well before testing.

Thanks!

#3

Hi,

Apologies for the slow response, honestly I don’t know where the time goes.

This was a bit odd, but even after clearing the cache, it was still an issue, only in Chrome.

The screenshots were only me resizing the browser for the mobile view, I wasn’t developing the site on a mobile device.

I’ve cleared the cache/CDN and browser cache multiple times, but it’s still displaying oddly for me here.

I can’t replicate this on Chrome mobile or Firefox, Oprah etc, so it looks like this is possibly just an issue with my Chrome browser on desktop. So long as it looks alright for others, I’m not gonna worry about it too much and hopefully the next browser update will fix it.

Thanks for your help here

Dan

#4

Hello Danny,

Thanks for updating the thread.

I checked the website and on my end too mobile menu is working fine. Please see screenshot. I suggest you to take a look at the website using different device and see how it goes.

Thanks.

#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.