Header / Navigation inline / Submenu in row, not column?

[ULinn]

I use a navigation inline-element, menu with the top links in a row. Now I’d like to have also the submenu shown in a row, not in a column. If I change the “CONTENT FLEX LAYOUT” in the Sub-Link section from “column” to “row” nothing happens - the sublinks are still in a column and not in a row.

What can I do to have the sublinks in a row?

Best regards

Uli

[thai]

Hi Uli,

You have to use the custom CSS for that. Please add this element CSS to your navigation inline element:

$el .x-dropdown {
    display: flex;
    justify-content: space-around;
}

Hope it helps

[ULinn]

Great, that works, prefect!

But shouldn’t selecting row or column in CONTENT FLEX LAYOUT have the same effect? Or has this setting another meaning? For the toplinks it works, so why does it not work with the sublinks?

Best regards

Uli

[ruenel]

Hello Uli,

Content Flex Layout is different from Self Flex. The code that @Thai gave is for the Self Flex for the submenu which is not in the option settings.

Hope this helps.

[ULinn]

Hi RueNel,

sorry, I did not understand your answer. But anyway - the menu works as expected, that’s the main thing.
Thank you for your help!

Uli

[Prasant]

You are most welcome, Uli. If you would like to learn more about Self Flex, please take a look at following resources.

align-self