SOLVED: Menu icon gap not respected in mobile menu

Bugs
1

Browser: Arc Version 0.109.0 (39665) - Chromium Engine Version 114.0.5735.133
OS: macOS

This happens in 1.8 and 1.8.1.

On a Nav Link element (nested inside a Nav (nestable) element), I set an icon on the link, and set a gap (any gap value produces this bug).

The gap works on desktop mode. There’s a gap between the icon and the text.

However, in mobile mode (in the default mobile menu view), the gap disappears. There’s no gap.

I’ve tried specifically setting the gap again when in the mobile view (e.g. mobile landscape), in case it wasn’t being inherited.

I’ve inspected the wrapping .brxe-text-link anchor. In the Chrome inspector, when in mobile menu view, if I look in the Styles panel, the CSS gap rule is greyed out. If I go to the Computed panel, it looks like the rule is still being applied. But it clearly isn’t.

Let me know if you need more info, a login, a video, etc.

1 Like
2

Hey Dave,

thanks for your report.

I was able to reproduce the issue and added it to our bug tracker.

Some custom CSS on the nav nestable element should fix the issue for now:

root.brx-open li.menu-item a {
  display: flex;
}

Best,

André

3

Great! Thanks André.

Happy bug crushing.

4

Hi Dave,
We’ve fixed this bug in Bricks 1.8.2, now available as a one-click update in your WordPress Dashboard.

Please let us know if you are still experiencing issues.

Best regards,
timmse