Display Order of Header Menu in Employee Center

[Community Alums]

I would like to change the order of the menus shown in the header menu of Employee Center, but I don't know how to do it.
Specifically, I would like to place "My favorites" and "Profile" to the right of "Tours".

If anyone knows how to change it, I would like to know.

[RodGallegos]

Hey there Takumi, 

I had the same issue. Checked out this article: https://css-tricks.com/content-jumping-avoid/ and used the min-height trick and this solved my problem. There is not tricky business in my screen shot, I simply loaded my portal and the Header loaded as you see.

You can see in my HTML that the Cart, Tours, and Wishlist appear before My Tasks and the rest of the menu items.

In my custom Style Sheet, this is the CSS I added to fix the "snapping" issue 

 

 

Hope this fixes the issue for you! BTW I am using Chrome for my browser. I haven't tested others just yet. 

[RodGallegos]

I meant to highlight the .height-adjust class where the min-height property is being set. 

[RodGallegos · Accepted solution]

After further investigation it looks like there is an issue with the loading order of these menu items. At random refreshed of the page, the menu items would snap back to their OOTB order. So I took a bit more of a heavy handed approach. But I did get this to work consistently. 

This is my cloned head widget:

 

 

 CSS in the widget

End result

 

[RodGallegos]

@Community Alums Have you had a chance to test out the method I provided?

[Community Alums]

@RodGallegos 

Thank you for your response.

Thanks to the method you gave me, I was able to solve the problem!