SOLVED: Centered text in mobile menu doesn't work

Bugs
1

Bricks Version: 1.5.4

Hi,

Centered text is not possible in mobile menu because text-align property is applied to the a tags, which have auto width.

CSS should be set to the ul or li tag instead.

image
image1320×526 45.6 KB

image
image1179×422 31.1 KB

2

The text align is applied to the right place, to the link. You just need to center the elements in the container or make them full width. But I’m almost sure this can be done natively in Bricks. I don’t think something like this would go unnoticed for such a live time :crazy_face:

3

Well, just try and tell me if you find out a native way, I didn’t.

There are a lot of things that get unnoticed because not used so often or because of quick CSS fixes :wink:
Or because people use some alternative like BricksExtras because native mobile menu is… well…

For instance, here’s a quick CSS fix that enables text centering option:

.bricks-mobile-menu > li > a { 
    width: 100%;
}

Regarding the right target for CSS text-align rule, there are multiple solutions, depending if you want the li to extend in order to align link backgrounds.
So targetting a tags like this could be OK, but then we would need some other settings for li tags because we might not want the a tags to be 100% width because of background color and padding.

Setting the rule on ul is a quicker and more general way of doing it and works in 99% of usecases because it also centers the li tags inside the ul. Then you can decide if you want the li tags to be 100% to align backgrounds or not.

Of course, there are also submenus, so more combinations, but it’s not my job :rofl:

1 Like
4

Hi Yan,
Thanks so much for your report!

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

Best regards,
timmse

1 Like
5

Hi Yan,
We’ve fixed the issue in Bricks 1.5.6, now available as a one-click update within your WordPress Dashboard.

Please let us know if you are still experiencing issues.

Best regards,
timmse