[Service portal] Change the style of the menu item for current page

Community Alums · ‎06-14-2017

Hello community,

Is it possible to apply a specific CSS class for the menu item of the active page ?

Regards

Community Alums · ‎01-24-2018

Hi everyone and thanks a lot for your answers.

Finally, we have found a solution to apply a specific CSS class on the menu item link active based on the current page ID.

To do it, we just added this code in the CSS include of the theme :

.navbar-nav > li > a.active {   
       color:   #f00;
}

The widget "Header Menu" compute the menu content and use the related ng-template "menuTemplate" to generate all menu items HTML.

So, in the menuTemplate ng-template, we have replaced

<a ng-if="item.items.length == 0 && !item.scriptedItems" ng-href="{{item.href}}" target="{{item.url_target}}" title="{{item.hint}}" >
  <fa ng-if="item.glyph" name="{{::item.glyph}}"></fa>
  <span ng-bind-html="item.label"></span>
</a>

By

<a ng-if="item.items.length == 0 && !item.scriptedItems" ng-href="{{item.href}}" target="{{item.url_target}}" title="{{item.hint}}" ng-class="{ 'active':item.href.indexOf('?id='+$root.page.id) >= 0 } ">
  <fa ng-if="item.glyph" name="{{::item.glyph}}"></fa>
  <span ng-bind-html="item.label"></span>
</a>

It works fine.

Regards

View solution in original post

mike_visser · ‎02-28-2018

Thank you for posting your solution, this works for me in /SP however I'm unable to get it to work in /CSM portal

The conditional is such that page.id and the item.href must be the same to display .active
In /csm the url's contain additional parameters than the page.id which voids the condition and fails to render .active
I'm not an angular ninja so I'm scratching my head on how to accomplish this.

Has anyonone else been able to get this to work in /CSM? Thanks in advance!

Community Alums · ‎03-01-2018

Hi Mike,

I have checked my solution in CSM and it's not working very well because the URL contains many parameters.

So I have found an improvement to resolve it and I have updated my previous post ;-). Look at the message.

If you want to use it for CSM, you can modify the menuTemplate and add the CSS style in the CSS include of the CSM theme (eg. customer-service-styles.css ).

Regards

mike_visser · ‎03-01-2018

I am humbled and grateful for your guidance. This works perfectly and appears to be the most elegant solution. Thank you Chritophes!

patricklatella · ‎07-25-2019

Hi Christophes, I'm looking to do your solution...the bit where you say:

"So, in the menuTemplate ng-template, we have replaced"

where is this done?

thanks!

patricklatella · ‎07-25-2019

Actually, I think I found it.