responsive menu outlining

[ART]

I am using the responsive menu with material icons. When in hamburger mode the icons and text are not outlined straight (vertically).

Is there a way to achieve that? Or is there another menu which works better in this regard?

[Pablo]

What exactly did you do?

[ART]

I have sent an example to you.

[Pablo]

You can change the alignment by adding this code between the heads tags (in Page HTML):

Code: Select all

<style>
#wb_Menu ul li .svg-icon 
{
    vertical-align: middle;
}
</style>

[ART]

Unfortunately it does not seem to work (in preview)

[Pablo]

Make sure the ID is correct.

[ART]

It is "Menu". I am testing it in the example i sent to you.

[ART]

Just for being clear: What i would like to achieve is that the icons line up vertically straight hence independent of the length of the text of the item.

[Pablo]

I don't think I understand what you are trying to do.
Can you please be more specific?

[ART]

I'm sorry I couldn't make it clear so I'll try again.

This plays at breakpoints of e.g. 320 or 480, where the responsive menu enters hamburger mode and the menu items are unfolded vertically.

The icon is shifted further to the left for a long word than for a short word. And that does look pretty at all. The icons are not directly below each other, because the text of the menu items differs in length.

[Pablo]

The alignment is set to 'center', so that is why the icons are not directly below each other.

[ART]

Which setting should i use? Layout alignment to left does not make a difference. More in the default view the menu is then shifted to the left horizontally.

[Pablo]

The alignment of the mobile menu can be set in the Property Inspector.

[ART]

It does not make a difference. Actually this is how it was before i asked for help. It looks like thishttps://drive.google.com/file/d/1_mdqWM ... sp=sharing

[Pablo]

The alignment of the mobile menu can be set in the Property Inspector.

[ART]

OK thanks. I was confused. I thought the object's properties would be the same in object properties and in the property inspector. Apparently not.