Service portal header menu

[parul_chauhan]

Hi All,

I need to add some options in header menu which should be visible only in mobile or small screen.

Is there a way we can do that?

Thanks,

Parul

[Ivano B]

Hi Parul

Unfortunately the only way I know is to clone the main header widget named Header Menu and add the missing bits.

Cheers

R0b0

[parul_chauhan]

Thanks R0b0,

But in that case also it will be visible on desktop as well.I want the menu to be visible only on mobile and not on desktop

Thanks,

Parul

[Ivano B]

Hi Parul

If we are talking about ServiceNow's mobile app but about the portal being responsive to small and mobile than is still valid my suggestion.

The header must be tailored using a combination of CSS and HTML to be visualised as you want on these devices.

If the OOB is not enough must be created on purpose.

Cheers

R0b0

[chirag_bagdai]

Hi Parul,

You can modify the "menuTemplate" ng-template and add below condition with your mobile menu item label.  

URL :

/sp_ng_template_list.do?sysparm_query=id%3DmenuTemplate

Add below ng-class which is using bootstrap class to make menu item visible only for mobile/small devices.

ng-class="{'visible-xs visible-sm': item.label == 'Knowledge' || item.label == 'Service Catalog'}"

<a ng-if="item.items.length == 0 && !item.scriptedItems" ng-class="{'visible-xs visible-sm': item.label == 'Knowledge' || item.label == 'Service Catalog'}" ng-href="{{item.href}}" target="{{item.url_target}}">{{ item.label }}</a>
<a ng-if="item.items.length > 0" href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ item.label }} <span class="caret"></span></a>
<ul ng-if="item.items.length > 0" class="dropdown-menu" role="menu">
       <li ng-repeat="item in item.items" ng-include="'menuTemplate'" />
</ul>
<a ng-if="item.scriptedItems.count > 0" href="javascript:void(0)" data-toggle="dropdown" title="{{item.hint}}">
       <span ng-bind-html="item.label"></span>
       <span ng-if="!item.scriptedItems.omitBadge" class="label label-as-badge label-primary sp-navbar-badge-count">{{item.scriptedItems.count}}</span>
</a>
<sp-dropdown-tree ng-if="item.scriptedItems.count > 0" items="item.scriptedItems.items" />

Note:

This change will impact for all portals. If you want to make this change for only your portal then you should create custom Header Menu widget and replace menuTemplate template with your custom angular template (similar to menuTemplate) in your custom header menu.

I hope this helps. Please mark correct/helpful based on impact.

Let me know in-case of any question.

Regards,
Chirag Bagdai