Flexbox children alignment issue

Design help General
1

Hello,

I have issues aligning the child element (icon) in its flex parent container (menu button 2).

image
image304×118 3.36 KB

image
image282×278 4.72 KB

I’m trying to align it in the center of its parent element. What’s weird is the fact that in the default view, when I align it in the center with the Align tool, it works perfectly, but not when I’m in the responsive mobile view.

Here, in the desktop view where it works perfectly(normaly display is at none since I need it in mobile views):
Result

image
image188×246 4.34 KB

Settings
image
image484×1754 75.2 KB

Here in mobile view, where it doesn’t work, even though it has the same settings:
Result

image
image254×258 4.5 KB

Settings
image
image488×1854 80.2 KB

I’m lost here.

Here is my site Read-Only: [LINK](Webflow - Portfolio site)
(how to share your site Read-Only link)

2

Hi - With the icon element selected, you can set the typography alignment to centre and it should solve the issue. Otherwise, you could use your own custom burger icon. Hope this helps.

3

Thank you but this only aligns the icon horizontally and I also need it to be centered vertically.

4

Give your button a size eg. 92px x 92px (and remove padding), then set your icon size to 100% width and 100% height and alignment to flex (centered horizontally and vertically).