Add new button to navbar in service portal

[Fdeveloper]

Hi,

I want to create a new button (My request) in navbar which contains my requests next to 
system adminstrator, any suggestion please.
Thank you.

[Vishakha]

Hi,

In addition to Namrata.

Complete all process as per Namarat suggested.

After that Navigate to Service Portal Configuration--> Widget-->Open Copy of Header Menu.

After opening click on CSS checkbox then CSS code open in that write small code as shown in below screenshot.

Best Regards,

Vishakha

[Kunal Varkhede]

Hi Fdeveloper,

In addition to @Namrata 

Just paste this line next to System administartor in below script of stock header widget(clone of stock header)

<div>
  <nav class="navbar-inverse" ng-class="::{'navbar':!isViewNative, 'is-native': isViewNative}"
       role="navigation">
    <div ng-show="::!isViewNative" class="navbar-header">
<a class="navbar-brand" ng-if="::!portal.logo" href="?id={{::portal.homepage_dv}}"><span ng-bind="portal.title"></span></a>
      <a class="navbar-brand navbar-brand-logo" ng-if="::portal.logo" ng-href="?id={{::portal.homepage_dv}}" ng-click="collapse()" aria-label="${Go to homepage}">
        <img ng-src="{{::portal.logo}}" title="ServiceNow" role="presentation" alt="${Portal Logo}" />
      </a>

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sp-nav-bar">
        <span class="sr-only">${Toggle navigation}</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div sp-navbar-toggle="" class="collapse navbar-right" id="sp-nav-bar">
      <!-- Include The Menu -->
      <sp-widget widget="::data.menu"></sp-widget>
      <ul ng-if="(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav" role="presentation">
        <li role="presentation"><a href ng-click="::openLogin()">${Login}</a></li>
      </ul>
      <ul ng-if="user.logged_in" class="nav navbar-nav" role="menubar">
        <!-- chat, avatar, and logout -->
        <li ng-if="::data.connect_support_queue_id" role="presentation"><a href ng-click="openPopUp()" role="menuitem">${Live Chat}</a></li>
        <li ng-if="showAvatar" class="hidden-xs dropdown" role="presentation">
          <a href class="toggle-dropdown" data-toggle="dropdown" aria-expanded="false" title="{{::data.profileBtnMsg}}" aria-label="{{::data.profileBtnMsg}}: {{::user.name}}" id="profile-dropdown"  role="menuitem" aria-haspopup="true">
            <span class="navbar-avatar" aria-hidden="true"><sn-avatar class="avatar-small-medium" primary="avatarProfile" /></span>
           <span class="visible-lg-inline">{{::user.name}}</span>
          </a>
          <ul class="dropdown-menu" role="menu" aria-label="{{::data.profileBtnMsg}}">
            <li role="presentation"><a tabindex="-1" ng-href="?id=user_profile&sys_id={{::user.sys_id}}" role="menuitem">${Profile}</a></li>
            <li ng-if="::!(isViewNative || isViewNativeTablet)" role="presentation"><a tabindex="-1" href="{{::portal.logoutUrl}}" role="menuitem">${Logout}</a></li>
          </ul>
        </li>





        //Here you can add Request next to user name
        <li role="presentation"><a tabindex="-1" ng-href="?id=sc_request" role="menuitem">${Request}</a></li>
        //


        
        
       <li ng-if="showXSAvatar" class="visible-xs-block" role="presentation"><a role="menuitem" ng-href="?id=user_profile&sys_id={{::user.sys_id}}" ng-click="collapse()">
          <span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="avatarProfile" /></span>{{::user.name}}</a>
        </li> 
        <li ng-if="::!(isViewNative || isViewNativeTablet)" class="visible-xs-block" role="presentation"><a role="menuitem" ng-href="{{::portal.logoutUrl}}" ng-click="collapse()">${Logout}</a></li>
      </ul>
    </div>
  </nav>
</div>

<li role="presentation"><a tabindex="-1" ng-href="?id=sc_request" role="menuitem">${Request}</a></li>

Here is the Output:

Thanks,

Kunal

[Fdeveloper]

Hi ,

the problem i find is that when i want to add copy of stock header to main 
menu i can't find it i only find these 5.
Thank you.

[Kunal Varkhede · Accepted solution]

Hi,

Ok you first find in Portal which theme you are using and configure as per below steps

You can check in Portal.

1)In Navigation type Portal ->

2)Check on which portal you want to modify the requirement ->

3)Check which Theme is for that portal is already selected ->

4)Open that Theme in that check header  if it OOTB theme then you need to clone this or you can edit these theme.  

Open this Service Portal and check theme here is La Jolla 

I opened this theme and Check here which Header is already set to your Theme. If it OOTB then you need to clone these Header and change in it. If you clone OOTB Header then don't forget to apply to your current portal Theme as per below screenshot. 

Add the below line after the system administrator and check my above changes so that you will get clear idea

<li role="presentation"><a tabindex="-1" ng-href="?id=sc_request" role="menuitem">${Request}</a></li> 

Please Mark correct/helpful answer if it help you in any way.

Thanks,

Kunal.

[Fdeveloper]

Hi kunal,

Thank you now it's working,how i can display the requests that i have made in this buuton i know there is a widget named My request contain the requests  is what i should use it for