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

[Community Alums]

Hello community,

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

Regards

[Community Alums]

Hi Claire,

I am still interested in your CSS code 😉 I would like to test on our portal to see how the link behaves.

thank you in advance

Christophe

[celuva2017]

Our developer fixed the problem for me! It had to do with my dev instance, not the code. I don't have his new CSS, though.

[Community Alums]

Yes, it's the embedded OOB widget called "Header menu".

We would like to keep using the OOB version. So I don't see any solution.

[Ivano B]

Hi Christophes

Probably it doesn't add any value because of the type of requirement but if you have time you can think about cloning both the widget and implement the functionality.

Cheers

R0b0

[Community Alums · Accepted solution]

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