[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

celuva2017 · ‎11-20-2017

I keep trying to post it to you but it's not letting me. I can try to send it to you in a message if this keeps happening

celuva2017 · ‎11-20-2017

I edited the code in my cloned header widget. Once you've cloned the header, then you can go to branding editor and assign the new header to your theme. Then go to "Portals" and edit the header code directly there. The search feature is actually "<sp-widget widget="data.typeahead"></sp-widget>".

I added Technology Services by making a table directly in my header. I'm trying to post the HTML here but will message it if I can't.

celuva2017 · ‎11-20-2017

Note the Information Technology Services and "data.typeahead" widget that I mentioned in my other comment- that's the search bar

Community Alums · ‎11-14-2017

Thank you Claire.

The CSS attribute hover works but if we have clicked on the link.

If the user comes from another link on this page, the menu item won't appear active.

Regards

celuva2017 · ‎11-20-2017

It's not letting me reply to anyone