[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

Ivano B · ‎06-15-2017

Hi Christophe

Apologies for my previous answer. Now is clear.

The problem with your requirement is the fact that every time you hit a link you are changing a page so probably you can't use the usual CSS.

Maybe if clone the header widget and you change it in order to check the actual page will work as you want.

Unfortunately OOB is not capable to do something like this.

Cheers

R0b0

Community Alums · ‎06-15-2017

Hello,

thanks for your answer. We use a clone of the header widget but we can't modify the OOB menu generator OOB :

<sp-widget widget="data.menu"></sp-widget>

Christophe

Ivano B · ‎06-15-2017

Hi Christophe

Have a look to this document it explains where to find the name of the sub widget used for the list.

documentation/widget_embedded.md at 19ef07386eb94959698fcc534e89bfc9991bb702 · service-portal/docum...

In your case the name should referenced into the client controller.

I hope this will help/answer your question and if it does please mark it

Cheers

R0b0

celuva2017 · ‎10-13-2017

Did you ever find an answer to your question? I have a similar question re: <sp-widget widget="data.menu"></sp-widget>. I did edit the color of the links when hovered over, and can share the CSS with you if that would help. But, I can't figure out how to change the background of the link when I hover. Here's a picture of what I'm talking about- I changed the color of the links (blue), color of the links when you hover (orange), but i cant figure out how to change the background hover- currently a light gray, but I want white :

denissieng · ‎11-13-2017

Hi Claire,

I can see that you ve set up a search bar in the header. Could you tell me how to do that? - do I need to enter 'widget header' and modify te html? My customer requires the same configuration.

In addition, how do you add the text 'technology services' above the menu?

Thank you in advance for your help. :=)