Employee center - Mega menu topics to the other side of the bar?

[JordyZ]

Hi,

I was wondering if it's possible to put the Report Incident and Knowledge topics to the other side of the mega menu bar (to the right) for better visibility/sectioning.

Any help is appreciated!

[Wybren1 · Accepted solution]

There's a non elegant solution which I do not really recommend but here goes:

1. Open the "EC Theme"
2. Add a new CSS include (Call it "Split main menu" or something
3. Create a new stylesheet and add the following

.main-menu > div.navigation-menu-item:nth-of-type(3) {
  margin-left: auto;
}

This will select the divs within class main-menu and then from the "3rd" div it will set the margin-left to fill it all the way so it moves to the right.

The issue is that the widget "Employee Center Header" uses an ng-repeat on all the taxomy items. So whenever you are now "adding" another menu item it will not make sense anymore.

Other solution
I would leave knowledge where it's now, and maybe add a "floating" button to report an incident in the "footer" widget.

Hope this helps! 🙂

[JordyZ]

@Wybren1 Thanks for providing a thorough explanation and even an alternative! 

[Wybren1]

It's the one shown above, here's how to do it:

1. Goto Service Portal > Themes
2. Open the EC Theme
3. Make sure you in the "Employee Center" scope
4. Click New in the CSS Includes related list
   
5. Name = Split Menu
   
6. Click the Magnifying Glass in stylesheet (A pop up will open)
7. Click New
8. Fill in a name "Split menu" and the CSS
   

.main-menu > div.navigation-menu-item:nth-of-type(3) {
  margin-left: auto;
}

• Submit the stylesheet
• Submit the css include

It should work then 🙂

[JordyZ]

Perhaps a rookie question, but I don't see a "new" button to add the CSS include to the EC theme. 

How do I add it?

Thanks in advance!