SOLVED: Mobile menu hamburger is not well vertically aligned

Bricks Version: 1.4RC

Hi,
It looks like the hamburger icon is not vertically centered in the menu element:

2 Likes

Hi Yan,
Thanks so much for your report!

The problem is related to line height. The menu toggle inherits the body line-height. If you set the line height under Style » Typography to 0 on the breakpoint where the mobile menu shows up, the issue gets fixed.

However, we can probably add this by default to the corresponding mobile menu breakpoint, or find another solution.

Best regards,
timmse

4 Likes

Thanks, it works :slight_smile:

That said, it feels a bit strange to have to change a line height for this.
Can’t it be automatically centered with vertical align or vertical flex and justify center?

2 Likes

Hey,
it’s definitely unnecessary, but like I said:

Best regards,
timmse

Just ran into this too in 1.4 stable… any chance this bug will be fixed in the next version?

I too can confirm that the issue still exists and while setting line-height to 0 fixes the issue in the builder screen, it does not get applied on the front end.

I have the same problem.

I was given this code which fixes on the front end also…

root .bricks-mobile-menu-toggle {
vertical-align: middle;
}

3 Likes

issue still present in 1.5.3.

Any possibility for 1.5.4?

1 Like

Such a shame this issues persists…

My fix:

.brxe-nav-menu {
    display: flex;
    align-items: center;
}

Seems to work in all situations.

2 Likes

Thank you for the fix!

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

Please let us know if you are still experiencing issues.

Best regards,
timmse