SOLVED: Help Hamburger Menu Icon Jumps on Iphone

Bricks Version: 1.3.3
Browser: Safari Iphone XS MAX
OS: IOS 14.7
URL: http://akk-kinderladen.de.www528.your-server.de/

Hello again!

I have the problem, that the hamburger icon jumps a little bit to the right when open the mobile menu and close it.

I see this only at the moment on my mobile phone iPhone XS MAX (14.7.1) in Safari AND Firefox.
With a android phone from my colleque its ok.

Can someone confirm this?
Need help :slight_smile:

Greetings Andre

I have exactly the same problem! It does not show up in my dev tools, only on my phone and tablet (where also the hamburger is shown). Does anyone knows a fix?

1 Like

Hi Chaps, Not sure if you have searched the forum or not or if it is different issue. But there is currently something being worked on to a similar bug you mentioned. Hoping for a fix in the next couple of releases:

WIP: Mobile menu moving when clicked

1 Like

Hi Michael,

i thin it is the same fault. I didn’t find this post, because i searched for hamburger :wink:

I hope the fix comes quick…

1 Like

Yes, definitely the same issue! Thanks for your quick reply!

1 Like

Hi guys (@ARAKZ, @barthusz, @Michael),

seems like switching position relative to fixed and the transform are causing the issue, see the video.

Problem:

.bricks-element-nav-menu.show-mobile-menu .bricks-mobile-menu-toggle {
  position: fixed;
  transform: translate(-50%,-50%);
}

Solution (probably):

.bricks-element-nav-menu.show-mobile-menu .bricks-mobile-menu-toggle {
    position: inherit; /* relative */
    -webkit-transform: translate(0);
    transform: translate(0);
}

Regards,
timmse

2 Likes

Hey Timmse,

your code works, but now i can’t change the postion top/bottom of the close-Icon…

:grimacing:

Yeah because of the position: relative @ARAKZ.

In your case (your close Icon is somewhere else, so you need the fixed or absolute position), just overwrite the transform value (with 0 like in the example). I think this might work.

.bricks-element-nav-menu.show-mobile-menu     .bricks-mobile-menu-toggle {
  transform: translate(0);
}

@timmse — thanks for looking into this. @luistinygod is this something we can look to get updated now please? Seems to be an open issue for quite a while.

Hello @Ross , @timmse, @ARAKZ, @barthusz, @Michael,

Thank you all for your patience and investigations regarding this issue. The fix for this will be included in the coming Bricks release.

3 Likes

Hi @luistinygod ,

I noticed the problem is still there, do you already know when this will be fixed?
I think this one is also an important issue even though it can be fixed with some custom coding.

hhm in my case (and other projects) it work since the update.

Looks like this is still happening on V 1.9.7.1

Yep, and there is already a current report on this: