Customizing global header in Employee Center

radiantbeam
Tera Contributor

Hi,

 

I'm not very experienced with EC and need to find a solution to put my custom menu item after 'My Favorites' and before 'Profile'. I tried to edit Header widget, but I only managed to add this item after the Profile in HTML field. How to add my menu item to OOTB generated list and order it how I want?

Thanks in advance

 

 

1 ACCEPTED SOLUTION

Shruti
Mega Sage
Mega Sage
Hi,
 
Paste below to HTML section of the widget and update the href for new menu item (highlighted in bold twice for mobile view and desktop view)
 
<!-- Nav bar menu items starts-->
<nav class="navbar-inverse" aria-label="Primary" role="navigation" ng-if="!showViewAsHeader">
 
  <!-- Piece above searchbar -->
  <div class="clearfix">
    <div class="navbar-header nav-container" ng-class="{'nav-mobile' : showMobileMenuOnDesktop || mobileDevice}">
 
      <!-- Logo -->
      <a class="navbar-brand" ng-if="::!portal.logo" href="?id={{::portal.homepage_dv}}" aria-label="{{::portal.title}}"><span>{{::portal.title}}</span></a>
    <a class="navbar-brand navbar-brand-logo"
           ng-if="::portal.logo" href="?id={{::portal.homepage_dv}}"
           aria-label="{{::portal.title}} - ${Home Page}"
           data-toggle="tooltip"
           data-placement="bottom"
           data-title="{{::portal.title}} - ${Home Page}">
        <img ng-src="{{::portal.logo}}" alt="{{::portal.title}} - ${Home Page}"/>
      </a>
 
      <!-- Search Bar Desktop -->
      <div ng-class="mobileDevice ? 'header-search-mobile' : 'header-search'" ng-show="showSearchBar && !mobileDevice">
        <sp-widget widget="data.typeahead"></sp-widget>
      </div>
 
      <div ng-if="!(showMobileMenuOnDesktop || mobileDevice)" class="hidden-xs sp-loading-indicator la-sm" role="presentation" ng-class="{'invisible': !loadingIndicator}">
          <div></div>
          <div></div>
          <div></div>
      </div>
 
      <div ng-if="data.showSparkle">
        <sp-widget widget="data.sparkle"></sp-widget>
      </div>
 
      <!-- Esc Notifications Bell widget -->
      <div ng-if="data.isNotificationsActive && (showMobileMenuOnDesktop || mobileDevice)" class="main-header-item">
        <sp-widget widget="data.notificationsBellWidget"></sp-widget>
      </div>
 
      <!-- Mobile Navigation View -->
      <div class="mobile-top-navigation" ng-if="showMobileMenuOnDesktop || mobileDevice">
        <!-- Toggle Button (Hamburger Menu for Mobile View) -->
        <button type="button" 
                class="sub-navbar-overflow-entry-button"
                ng-class="isMobileViewOnDesktopExpanded ? 'close-icon-visible' : ''"
                aria-label="{{isMobileViewOnDesktopExpanded ? '${Hide menu}' : '${Show menu}'}}" 
                aria-expanded="{{isMobileViewOnDesktopExpanded}}" 
                data-toggle="tooltip"
                data-placement="auto bottom"
                data-original-title="{{isMobileViewOnDesktopExpanded ? '${Hide Menu}' : '${Show Menu}'}}"
                ng-click="toggleMobileMenuVisibility($event)">
          <div ng-if="!isMobileViewOnDesktopExpanded">
     <!-- showing count as '9+' when the count is more than '9' -->
             <span class="label label-as-badge label-primary">{{((data.mobileViewTodoCount + cartItemCount + data.assetAttestaionCount) > 9) ? '9+' : (data.mobileViewTodoCount + cartItemCount + data.assetAttestaionCount) }}</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </div>
          <i class="fa fa-close" ng-if="isMobileViewOnDesktopExpanded"></i>
        </button>
 
        <div class="mobile-view-on-desktop"
             ng-class="mobileDevice && showSearchBar ? 'search-visible' : ''"
             ng-show="isMobileViewOnDesktopExpanded"
             ng-click="handleMobileViewClick($event)"
             role="presentation">
            <div class="height-adjust">
               <ul class="mobile-view-navbar">
                 <!-- Mega Menu & Login functionality (Mobile View) -->
                 <li class="mobile-mega-menu-entry">
                    <sp-widget widget="data.escNavigation"></sp-widget>
                    <ul ng-if="::(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav">
                       <li><a href ng-click="openLogin()">${Login}</a></li>
                    </ul>
                 </li>
                 <li>
                   <div class="main-header-items header-nav-item" ng-if="!showMobileMegaMenu">
                    <div class="main-header-item" ng-if="data.showAssets">
                       <a class="header-item" href="?id=my_assets" id="assets" aria-label="${My Assets}, {{c.attestaionCountTranslation}}">
                        <span ng-bind-html="'${My Assets}'" aria-hidden="true"></span>
                        <span ng-show="data.assetAttestaionCount" class="label label-as-badge label-primary">{{data.assetAttestaionCount}}</span>
                       </a>
                     </div>
                     <div class="main-header-item" ng-if="data.showTodos">
                       <a class="header-item" href="?id=hrm_todos_page" id="todos_mobile" aria-label="${My Tasks}, {{c.todoCountTranslation}}">
                         <span ng-bind-html="'${My Tasks}'" aria-hidden="true"></span>
                         <span ng-show="data.todoCount" class="label label-as-badge label-primary">{{data.todoCount}}</span>
                       </a>
                     </div>
                     <div class="main-header-item" ng-if="data.showRequests">
                       <a class="header-item" href="?id=my_requests" id="requests_mobile" aria-label="${My Requests}">
                        <span ng-bind-html="'${My Requests}'" aria-hidden="true"></span>
                        <span ng-show="data.requestCount" class="label label-as-badge label-primary">{{data.requestCount}}</span>
                       </a>
                     </div>
                     <div class="main-header-item" ng-if="data.isFavoritesEnabled">
                       <a class="header-item" href="?id=favorites_list" id="favorites_mobile" aria-label="${My Favorites}">
                        <span ng-bind-html="'${My Favorites}'" aria-hidden="true"></span>
                       </a>
                     </div>
                      <div class="main-header-item">
                       <a class="header-item" href="?id=test" aria-label="${My IT Footprints}">
                        <span ng-bind-html="'${My IT Footprints}'" aria-hidden="true"></span>
                       </a>
                     </div>
                     <!-- Experience Feedback Header Menu item widget -->
                     <div class="main-header-item" ng-if="showMobileMenuOnDesktop && exFeedbackActive">
                       <sp-widget widget="data.headerFeedbackWidget"></sp-widget>
                     </div>
                     <div class="main-header-item" ng-if="data.showMoreItems" ng-repeat="item in data.moreItems">
                       <a ng-if="item.label !== item.shortLabel"
                          href="{{item.href}}"
                          data-toggle="tooltip"
                          data-placement="bottom"
                          data-original-title="{{item.label}}"
                          aria-label="{{item.label}}"
                          class="header-item">
                          <span ng-bind-html="item.shortLabel" aria-hidden="true"></span>
                       </a>
                       <a ng-if="item.label === item.shortLabel"
                          href="{{item.href}}"
                          aria-label="{{item.label}}"
                          class="header-item">
                          <span ng-bind-html="item.shortLabel" aria-hidden="true"></span>
                       </a>
                     </div>
                     <!-- Cart, tours, and Wishlist (Mobile View) -->
                     <div>
                        <sp-widget widget="data.top.menu" id="menu_item"></sp-widget>
                     </div>
                   </div>
                 </li>
                 <li class="separator" ng-if="!showMobileMegaMenu"></li>
                 <li class="m-l-sm main-header-item" ng-if="c.data.voluntarySurveyIsActive">
                   <widget id="listening_posts_give_feedback_mega_menu"></widget>
                 </li>
                 <li class="separator" ng-if="!showMobileMegaMenu && c.data.voluntarySurveyIsActive"></li>
                 <!-- User Profile -->
                 <li class="m-t-sm m-b-sm header-nav-item user-name" ng-if="!showMobileMegaMenu">
                    <a href="{{data.link}}" ng-class="getClass(data.link)" aria-label="{{user.name}} ${profile}">
                      <span class="navbar-avatar"><sn-avatar class="avatar-small-medium" show-presence="false" primary="user.sys_id" /></span>
                      <span>{{user.name}}</span>
                    </a>
                 </li>
               </ul>
               <!-- Avatar (User profile Dropdown) with only Impersonate & Logout options -->
               <div class="impersonate-and-logout header-nav-item" ng-if="!showMobileMegaMenu">
                 <sp-widget widget="data.avatarDropDown"></sp-widget>
               </div>
          </div>
        </div>
      </div>
 
      <div ng-class="mobileDevice ? 'header-search-mobile' : 'header-search'" ng-show="showSearchBar && mobileDevice">
        <sp-widget widget="data.typeahead"></sp-widget>
      </div>
      
      <!-- Header Navbar -->
      <div ng-if="!(showMobileMenuOnDesktop || mobileDevice)" class="navbar-right">
        <div class="height-adjust header-group" aria-label="${Header menu}">
          <div class="nav navbar-nav header-menu">
            <div class="gt-menu-item" ng-if="data.showAssets">
                <a href="?id=my_assets" id="assets" aria-label="${My Assets}, {{c.attestaionCountTranslation}}">
                    <span ng-bind-html="'${My Assets}'" aria-hidden="true"></span>
                    <span ng-show="data.assetAttestaionCount" class="label label-as-badge label-primary">{{data.assetAttestaionCount}}</span>
                </a>
            </div>
            <div class="gt-menu-item" ng-if="data.showTodos">
              <a href="?id=hrm_todos_page" ng-class="getClass('?id=hrm_todos_page')" id="todos_link"  aria-label="${My Tasks}, {{c.todoCountTranslation}}">
                <span ng-bind-html="'${My Tasks}'"></span>
                <span ng-show="data.todoCount" class="label label-as-badge label-primary">{{data.todoCount}}</span>
              </a>
            </div>
            <div class="gt-menu-item" ng-if="data.showRequests">
              <a href="?id=my_requests" id="cases_popup" aria-label="${My Requests}"> <!-- TODO: Link for requests -->
                <span ng-bind-html="'${My Requests}'" aria-hidden="true"></span>
                <span ng-show="data.requestCount" class="label label-as-badge label-primary">{{data.requestCount}}</span>
              </a>
            </div>
            <div class="gt-menu-item" ng-if="data.isFavoritesEnabled">
               <a href="?id=favorites_list" id="favorites" aria-label="${My favorites}"> 
                 <span ng-bind-html="'${My Favorites}'" aria-hidden="true"></span>
               </a>         
            </div>
             <div class="gt-menu-item">
               <a href="?id=test" aria-label="${My IT Footprints}"> 
                 <span ng-bind-html="'${My IT Footprints}'" aria-hidden="true"></span>
               </a>         
            </div>
            <!-- Esc Notifications Bell Menu item widget -->
            <div ng-if="data.isNotificationsActive" class="main-header-item">
              <sp-widget widget="data.notificationsBellWidget"></sp-widget>
            </div>
            <div class="gt-menu-item more-menu-position" id="more-items" ng-if="data.showMoreItems">
              <a ng-if="(data.moreItems.length === 1) && (data.moreItems[0].label !== data.moreItems[0].shortLabel)"
                 href="{{data.moreItems[0].href}}"
                 target="{{data.moreItems[0].url_target}}"
                 data-toggle="tooltip"
                 data-placement="bottom"
                 data-original-title="{{data.moreItems[0].label}}"
                 aria-label="{{data.moreItems[0].label}}">
                <span ng-bind-html="data.moreItemsTitle" aria-hidden="true"></span>
              </a>
              <a ng-if="(data.moreItems.length === 1) && (data.moreItems[0].label === data.moreItems[0].shortLabel)"
                 href="{{data.moreItems[0].href}}"
                 target="{{data.moreItems[0].url_target}}"
                 ng-click="navEvent($event, data.moreItems[0].href)"
                 aria-label="{{data.moreItems[0].label}}">
                <span ng-bind-html="data.moreItemsTitle" aria-hidden="true"></span>
              </a>
              <a href
                 ng-if="data.moreItems.length > 1"
                 id="more-items-button"
                 aria-haspopup="true"
                 data-toggle="dropdown"
                 data-target="more-items-dropdown"
                 data-placement="bottom"
                 aria-label="{{data.moreItemsTitle}}" role="button">
                <span ng-bind-html="data.moreItemsTitle" aria-hidden="true"></span>
                <span class="fa collapse-margin m-l-xs fa-caret-down"></span>
              </a>
              <ul id="more-items-dropdown" ng-if="data.moreItems.length > 1" class="dropdown-menu"
                  aria-label="{{data.moreItemsTitle}}">
                <li role="presentation"
                    ng-repeat="item in data.moreItems"
                    class="ng-scope dropdown-menu-line header-menu-item">
                  <a ng-if="item.label !== item.shortLabel"
                     href="{{item.href}}"
                     target="{{item.url_target}}"
                     data-toggle="tooltip"
                     data-placement="bottom"
                     data-original-title="{{item.label}}"
                     aria-label="{{item.label}}">
                    <span ng-bind-html="item.shortLabel" aria-hidden="true"></span>
                  </a>
                  <a ng-if="item.label === item.shortLabel"
                     href="{{item.href}}"
                     target="{{item.url_target}}"
                     aria-label="{{item.label}}">
                    <span ng-bind-html="item.shortLabel" aria-hidden="true"></span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <!-- Avatar and its drop down (Desktop) -->
          <div class="avatar-drop-down gt-menu-item" role="presentation">
            <sp-widget widget="data.avatarDropDown" id="avatar_drop_down" ></sp-widget>
          </div>
          <!-- Cart, tours, and Wishlist -->
          <div class="gt-menu-item" role="presentation">
            <sp-widget widget="data.top.menu" id="menu_item"></sp-widget>
          </div>
        </div>
      </div>
    </div>
    
    <!-- LP Voluntary Feedback Widget-->
    <div ng-if="!(showMobileMenuOnDesktop || mobileDevice) && c.data.voluntarySurveyIsActive">
      <widget id="listening_posts_voluntary_feedback"></widget>
    </div>
    
  </div>
  
  <!-- Sub Navbar on Desktop -->
  <div class="navbar-collapse sub-navbar clearfix collapse collapsed hidden-xs"
       ng-class="{ 'in': expanded, 'collapsed': !expanded, 'sub-navbar--mobile-view': showMobileMenuOnDesktop }">
    <div>
      <sp-widget widget="data.escNavigation"></sp-widget>
      <ul ng-if="::(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav">
        <li><a href ng-click="openLogin()">${Login}</a>
        </li>
      </ul>
 
    </div>
  </div>
 
  <!-- Analytics -->
  <div ng-if="data.analyticsSupportEnabled">
    <widget id="cda-site-analytics" options="{'enable_logging': false}"></widget>
  </div>
</nav>
 
 
<nav class="navbar-inverse" aria-label="Primary" role="navigation" ng-if="showViewAsHeader">
    <div class="clearfix">
      <div class="navbar-header nav-container">
 
      <!-- Logo -->
        <a class="navbar-brand" ng-if="::!portal.logo" href="?id=ec_view_as_search&viewAs=true" aria-label="${Employee Center View As Home}"><span>${Employee Center View As Home}</span></a>
        <a class="navbar-brand navbar-brand-logo "
           ng-if="::portal.logo" href="?id=ec_view_as_search&viewAs=true"
           aria-label="{{::portal.title}}${ - View As Home Page}"
           data-toggle="tooltip"
           data-placement="bottom"
           data-title="{{::portal.title}}${ - View As Home}">
        <img ng-src="{{::portal.logo}}" alt="{{::portal.title}}${ - View As Home Page}"/>
      </a>
      </div>
  </div>
</nav>
 
 <!-- Experience Feedback Widget-->
    <div ng-if="!(showMobileMenuOnDesktop || mobileDevice) && exFeedbackActive">
      <sp-widget widget="data.modalWidget"></sp-widget>
    </div>
<sp-widget widget="c.data.perfWidget"></sp-widget>

View solution in original post

1 REPLY 1

Shruti
Mega Sage
Mega Sage
Hi,
 
Paste below to HTML section of the widget and update the href for new menu item (highlighted in bold twice for mobile view and desktop view)
 
<!-- Nav bar menu items starts-->
<nav class="navbar-inverse" aria-label="Primary" role="navigation" ng-if="!showViewAsHeader">
 
  <!-- Piece above searchbar -->
  <div class="clearfix">
    <div class="navbar-header nav-container" ng-class="{'nav-mobile' : showMobileMenuOnDesktop || mobileDevice}">
 
      <!-- Logo -->
      <a class="navbar-brand" ng-if="::!portal.logo" href="?id={{::portal.homepage_dv}}" aria-label="{{::portal.title}}"><span>{{::portal.title}}</span></a>
    <a class="navbar-brand navbar-brand-logo"
           ng-if="::portal.logo" href="?id={{::portal.homepage_dv}}"
           aria-label="{{::portal.title}} - ${Home Page}"
           data-toggle="tooltip"
           data-placement="bottom"
           data-title="{{::portal.title}} - ${Home Page}">
        <img ng-src="{{::portal.logo}}" alt="{{::portal.title}} - ${Home Page}"/>
      </a>
 
      <!-- Search Bar Desktop -->
      <div ng-class="mobileDevice ? 'header-search-mobile' : 'header-search'" ng-show="showSearchBar && !mobileDevice">
        <sp-widget widget="data.typeahead"></sp-widget>
      </div>
 
      <div ng-if="!(showMobileMenuOnDesktop || mobileDevice)" class="hidden-xs sp-loading-indicator la-sm" role="presentation" ng-class="{'invisible': !loadingIndicator}">
          <div></div>
          <div></div>
          <div></div>
      </div>
 
      <div ng-if="data.showSparkle">
        <sp-widget widget="data.sparkle"></sp-widget>
      </div>
 
      <!-- Esc Notifications Bell widget -->
      <div ng-if="data.isNotificationsActive && (showMobileMenuOnDesktop || mobileDevice)" class="main-header-item">
        <sp-widget widget="data.notificationsBellWidget"></sp-widget>
      </div>
 
      <!-- Mobile Navigation View -->
      <div class="mobile-top-navigation" ng-if="showMobileMenuOnDesktop || mobileDevice">
        <!-- Toggle Button (Hamburger Menu for Mobile View) -->
        <button type="button" 
                class="sub-navbar-overflow-entry-button"
                ng-class="isMobileViewOnDesktopExpanded ? 'close-icon-visible' : ''"
                aria-label="{{isMobileViewOnDesktopExpanded ? '${Hide menu}' : '${Show menu}'}}" 
                aria-expanded="{{isMobileViewOnDesktopExpanded}}" 
                data-toggle="tooltip"
                data-placement="auto bottom"
                data-original-title="{{isMobileViewOnDesktopExpanded ? '${Hide Menu}' : '${Show Menu}'}}"
                ng-click="toggleMobileMenuVisibility($event)">
          <div ng-if="!isMobileViewOnDesktopExpanded">
     <!-- showing count as '9+' when the count is more than '9' -->
             <span class="label label-as-badge label-primary">{{((data.mobileViewTodoCount + cartItemCount + data.assetAttestaionCount) > 9) ? '9+' : (data.mobileViewTodoCount + cartItemCount + data.assetAttestaionCount) }}</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </div>
          <i class="fa fa-close" ng-if="isMobileViewOnDesktopExpanded"></i>
        </button>
 
        <div class="mobile-view-on-desktop"
             ng-class="mobileDevice && showSearchBar ? 'search-visible' : ''"
             ng-show="isMobileViewOnDesktopExpanded"
             ng-click="handleMobileViewClick($event)"
             role="presentation">
            <div class="height-adjust">
               <ul class="mobile-view-navbar">
                 <!-- Mega Menu & Login functionality (Mobile View) -->
                 <li class="mobile-mega-menu-entry">
                    <sp-widget widget="data.escNavigation"></sp-widget>
                    <ul ng-if="::(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav">
                       <li><a href ng-click="openLogin()">${Login}</a></li>
                    </ul>
                 </li>
                 <li>
                   <div class="main-header-items header-nav-item" ng-if="!showMobileMegaMenu">
                    <div class="main-header-item" ng-if="data.showAssets">
                       <a class="header-item" href="?id=my_assets" id="assets" aria-label="${My Assets}, {{c.attestaionCountTranslation}}">
                        <span ng-bind-html="'${My Assets}'" aria-hidden="true"></span>
                        <span ng-show="data.assetAttestaionCount" class="label label-as-badge label-primary">{{data.assetAttestaionCount}}</span>
                       </a>
                     </div>
                     <div class="main-header-item" ng-if="data.showTodos">
                       <a class="header-item" href="?id=hrm_todos_page" id="todos_mobile" aria-label="${My Tasks}, {{c.todoCountTranslation}}">
                         <span ng-bind-html="'${My Tasks}'" aria-hidden="true"></span>
                         <span ng-show="data.todoCount" class="label label-as-badge label-primary">{{data.todoCount}}</span>
                       </a>
                     </div>
                     <div class="main-header-item" ng-if="data.showRequests">
                       <a class="header-item" href="?id=my_requests" id="requests_mobile" aria-label="${My Requests}">
                        <span ng-bind-html="'${My Requests}'" aria-hidden="true"></span>
                        <span ng-show="data.requestCount" class="label label-as-badge label-primary">{{data.requestCount}}</span>
                       </a>
                     </div>
                     <div class="main-header-item" ng-if="data.isFavoritesEnabled">
                       <a class="header-item" href="?id=favorites_list" id="favorites_mobile" aria-label="${My Favorites}">
                        <span ng-bind-html="'${My Favorites}'" aria-hidden="true"></span>
                       </a>
                     </div>
                      <div class="main-header-item">
                       <a class="header-item" href="?id=test" aria-label="${My IT Footprints}">
                        <span ng-bind-html="'${My IT Footprints}'" aria-hidden="true"></span>
                       </a>
                     </div>
                     <!-- Experience Feedback Header Menu item widget -->
                     <div class="main-header-item" ng-if="showMobileMenuOnDesktop && exFeedbackActive">
                       <sp-widget widget="data.headerFeedbackWidget"></sp-widget>
                     </div>
                     <div class="main-header-item" ng-if="data.showMoreItems" ng-repeat="item in data.moreItems">
                       <a ng-if="item.label !== item.shortLabel"
                          href="{{item.href}}"
                          data-toggle="tooltip"
                          data-placement="bottom"
                          data-original-title="{{item.label}}"
                          aria-label="{{item.label}}"
                          class="header-item">
                          <span ng-bind-html="item.shortLabel" aria-hidden="true"></span>
                       </a>
                       <a ng-if="item.label === item.shortLabel"
                          href="{{item.href}}"
                          aria-label="{{item.label}}"
                          class="header-item">
                          <span ng-bind-html="item.shortLabel" aria-hidden="true"></span>
                       </a>
                     </div>
                     <!-- Cart, tours, and Wishlist (Mobile View) -->
                     <div>
                        <sp-widget widget="data.top.menu" id="menu_item"></sp-widget>
                     </div>
                   </div>
                 </li>
                 <li class="separator" ng-if="!showMobileMegaMenu"></li>
                 <li class="m-l-sm main-header-item" ng-if="c.data.voluntarySurveyIsActive">
                   <widget id="listening_posts_give_feedback_mega_menu"></widget>
                 </li>
                 <li class="separator" ng-if="!showMobileMegaMenu && c.data.voluntarySurveyIsActive"></li>
                 <!-- User Profile -->
                 <li class="m-t-sm m-b-sm header-nav-item user-name" ng-if="!showMobileMegaMenu">
                    <a href="{{data.link}}" ng-class="getClass(data.link)" aria-label="{{user.name}} ${profile}">
                      <span class="navbar-avatar"><sn-avatar class="avatar-small-medium" show-presence="false" primary="user.sys_id" /></span>
                      <span>{{user.name}}</span>
                    </a>
                 </li>
               </ul>
               <!-- Avatar (User profile Dropdown) with only Impersonate & Logout options -->
               <div class="impersonate-and-logout header-nav-item" ng-if="!showMobileMegaMenu">
                 <sp-widget widget="data.avatarDropDown"></sp-widget>
               </div>
          </div>
        </div>
      </div>
 
      <div ng-class="mobileDevice ? 'header-search-mobile' : 'header-search'" ng-show="showSearchBar && mobileDevice">
        <sp-widget widget="data.typeahead"></sp-widget>
      </div>
      
      <!-- Header Navbar -->
      <div ng-if="!(showMobileMenuOnDesktop || mobileDevice)" class="navbar-right">
        <div class="height-adjust header-group" aria-label="${Header menu}">
          <div class="nav navbar-nav header-menu">
            <div class="gt-menu-item" ng-if="data.showAssets">
                <a href="?id=my_assets" id="assets" aria-label="${My Assets}, {{c.attestaionCountTranslation}}">
                    <span ng-bind-html="'${My Assets}'" aria-hidden="true"></span>
                    <span ng-show="data.assetAttestaionCount" class="label label-as-badge label-primary">{{data.assetAttestaionCount}}</span>
                </a>
            </div>
            <div class="gt-menu-item" ng-if="data.showTodos">
              <a href="?id=hrm_todos_page" ng-class="getClass('?id=hrm_todos_page')" id="todos_link"  aria-label="${My Tasks}, {{c.todoCountTranslation}}">
                <span ng-bind-html="'${My Tasks}'"></span>
                <span ng-show="data.todoCount" class="label label-as-badge label-primary">{{data.todoCount}}</span>
              </a>
            </div>
            <div class="gt-menu-item" ng-if="data.showRequests">
              <a href="?id=my_requests" id="cases_popup" aria-label="${My Requests}"> <!-- TODO: Link for requests -->
                <span ng-bind-html="'${My Requests}'" aria-hidden="true"></span>
                <span ng-show="data.requestCount" class="label label-as-badge label-primary">{{data.requestCount}}</span>
              </a>
            </div>
            <div class="gt-menu-item" ng-if="data.isFavoritesEnabled">
               <a href="?id=favorites_list" id="favorites" aria-label="${My favorites}"> 
                 <span ng-bind-html="'${My Favorites}'" aria-hidden="true"></span>
               </a>         
            </div>
             <div class="gt-menu-item">
               <a href="?id=test" aria-label="${My IT Footprints}"> 
                 <span ng-bind-html="'${My IT Footprints}'" aria-hidden="true"></span>
               </a>         
            </div>
            <!-- Esc Notifications Bell Menu item widget -->
            <div ng-if="data.isNotificationsActive" class="main-header-item">
              <sp-widget widget="data.notificationsBellWidget"></sp-widget>
            </div>
            <div class="gt-menu-item more-menu-position" id="more-items" ng-if="data.showMoreItems">
              <a ng-if="(data.moreItems.length === 1) && (data.moreItems[0].label !== data.moreItems[0].shortLabel)"
                 href="{{data.moreItems[0].href}}"
                 target="{{data.moreItems[0].url_target}}"
                 data-toggle="tooltip"
                 data-placement="bottom"
                 data-original-title="{{data.moreItems[0].label}}"
                 aria-label="{{data.moreItems[0].label}}">
                <span ng-bind-html="data.moreItemsTitle" aria-hidden="true"></span>
              </a>
              <a ng-if="(data.moreItems.length === 1) && (data.moreItems[0].label === data.moreItems[0].shortLabel)"
                 href="{{data.moreItems[0].href}}"
                 target="{{data.moreItems[0].url_target}}"
                 ng-click="navEvent($event, data.moreItems[0].href)"
                 aria-label="{{data.moreItems[0].label}}">
                <span ng-bind-html="data.moreItemsTitle" aria-hidden="true"></span>
              </a>
              <a href
                 ng-if="data.moreItems.length > 1"
                 id="more-items-button"
                 aria-haspopup="true"
                 data-toggle="dropdown"
                 data-target="more-items-dropdown"
                 data-placement="bottom"
                 aria-label="{{data.moreItemsTitle}}" role="button">
                <span ng-bind-html="data.moreItemsTitle" aria-hidden="true"></span>
                <span class="fa collapse-margin m-l-xs fa-caret-down"></span>
              </a>
              <ul id="more-items-dropdown" ng-if="data.moreItems.length > 1" class="dropdown-menu"
                  aria-label="{{data.moreItemsTitle}}">
                <li role="presentation"
                    ng-repeat="item in data.moreItems"
                    class="ng-scope dropdown-menu-line header-menu-item">
                  <a ng-if="item.label !== item.shortLabel"
                     href="{{item.href}}"
                     target="{{item.url_target}}"
                     data-toggle="tooltip"
                     data-placement="bottom"
                     data-original-title="{{item.label}}"
                     aria-label="{{item.label}}">
                    <span ng-bind-html="item.shortLabel" aria-hidden="true"></span>
                  </a>
                  <a ng-if="item.label === item.shortLabel"
                     href="{{item.href}}"
                     target="{{item.url_target}}"
                     aria-label="{{item.label}}">
                    <span ng-bind-html="item.shortLabel" aria-hidden="true"></span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <!-- Avatar and its drop down (Desktop) -->
          <div class="avatar-drop-down gt-menu-item" role="presentation">
            <sp-widget widget="data.avatarDropDown" id="avatar_drop_down" ></sp-widget>
          </div>
          <!-- Cart, tours, and Wishlist -->
          <div class="gt-menu-item" role="presentation">
            <sp-widget widget="data.top.menu" id="menu_item"></sp-widget>
          </div>
        </div>
      </div>
    </div>
    
    <!-- LP Voluntary Feedback Widget-->
    <div ng-if="!(showMobileMenuOnDesktop || mobileDevice) && c.data.voluntarySurveyIsActive">
      <widget id="listening_posts_voluntary_feedback"></widget>
    </div>
    
  </div>
  
  <!-- Sub Navbar on Desktop -->
  <div class="navbar-collapse sub-navbar clearfix collapse collapsed hidden-xs"
       ng-class="{ 'in': expanded, 'collapsed': !expanded, 'sub-navbar--mobile-view': showMobileMenuOnDesktop }">
    <div>
      <sp-widget widget="data.escNavigation"></sp-widget>
      <ul ng-if="::(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav">
        <li><a href ng-click="openLogin()">${Login}</a>
        </li>
      </ul>
 
    </div>
  </div>
 
  <!-- Analytics -->
  <div ng-if="data.analyticsSupportEnabled">
    <widget id="cda-site-analytics" options="{'enable_logging': false}"></widget>
  </div>
</nav>
 
 
<nav class="navbar-inverse" aria-label="Primary" role="navigation" ng-if="showViewAsHeader">
    <div class="clearfix">
      <div class="navbar-header nav-container">
 
      <!-- Logo -->
        <a class="navbar-brand" ng-if="::!portal.logo" href="?id=ec_view_as_search&viewAs=true" aria-label="${Employee Center View As Home}"><span>${Employee Center View As Home}</span></a>
        <a class="navbar-brand navbar-brand-logo "
           ng-if="::portal.logo" href="?id=ec_view_as_search&viewAs=true"
           aria-label="{{::portal.title}}${ - View As Home Page}"
           data-toggle="tooltip"
           data-placement="bottom"
           data-title="{{::portal.title}}${ - View As Home}">
        <img ng-src="{{::portal.logo}}" alt="{{::portal.title}}${ - View As Home Page}"/>
      </a>
      </div>
  </div>
</nav>
 
 <!-- Experience Feedback Widget-->
    <div ng-if="!(showMobileMenuOnDesktop || mobileDevice) && exFeedbackActive">
      <sp-widget widget="data.modalWidget"></sp-widget>
    </div>
<sp-widget widget="c.data.perfWidget"></sp-widget>