Menu graphic above and below when active

[felicityevans]

Hi,
I have placed an image above my menu items as graphics. How can I set the graphic to show below the active link on the nav like you would a particle for ancestor link?

You can see the dev site here: insyncdev.creativemindsdesign.com.au

Thanks

[lely]

Hello Felicity,

To move the icon below the text link, please enable REVERSE LAYOUT on TOP LINKS > CONTENT FLEX LAYOUT :

That settings will reverse all menu icons. In case you want to reverse the icon/graphic of only active link, we can use CSS to target it. Inspect the menu, go to Customize Tab > Element CSS, try adding the following:

$el.x-menu > li.current-menu-item > .x-anchor .x-anchor-content{
  flex-direction: column-reverse;
}

The result of that CSS is something like this:

Hope this helps.

[felicityevans]

@Lely

$el.x-menu > li.current-menu-item > .x-anchor .x-anchor-content{
flex-direction: column-reverse;
}

That worked perfectly! Thanks!

[ruenel]

You’re welcome!
We’re glad @Lely were able to help you out.