WIP: Hamburger after opening mobile menu is not on the correct place

Bugs
1

Browser: Safari latest on iOS, and Chrome
OS: iOS 17.4
URL: Link to a page that illustrates this issue
Video: Nav Element Bricks Issue.mov - pCloud

When I open on iPhone iOS 17.4 with Safari or Chrome the Mobile Menu, after closing the Hamburger is displaced about 1rem to the right.
When I view the page on the macOS 14.4 with Safari 17.4 I have the same issue, and when I open the inspector, the bug is gone.

2

Hi Michael,
Thanks so much for your report!

I reproduced the issue and added it to our bug tracker.

All in all a rather strange problem that is probably caused by the display value of the toggle. If you set it to inline-block instead of block, the problem seems to be solved.

Please add the following custom CSS to the menu (on the breakpoint where the mobile menu is showing) and let me know if it fixes the issue:

%root% .bricks-mobile-menu-toggle {
  display: inline-block !important;
}

Best regards,
timmse

SOLVED: Help Hamburger Menu Icon Jumps on Iphone
3

Yep, this worked for me.
I also added a vertical align, to help line up with adjoining elements (e.g. search icon)

%root% .bricks-mobile-menu-toggle {
  display: inline-block !important;
  vertical-align: top;
}