HTML Script: 

<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}" />
        <div id ="custom_header_text">"Hey Harsh"</div>
      </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>
        <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>

CSS:

.navbar {
  transition: 250ms opacity ease-in-out;
  -webkit-transition: 250ms opacity ease-in-out;
  border: 0;
  border-bottom: 4px solid $sp-navbar-divider-color;
}

.navbar-fade {
  opacity: 0.4;
}

.navbar-inverse .navbar-toggle {
  border-color: rgba(255, 255, 255, 0.25);
}

header[role="banner"],
.nav > li > a {
  max-height: 60px;
}

@media screen and (max-width: 768px){
  .nav > li > a {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}

.navbar-brand {
  max-height: 60px;
  padding: 0;
  padding-bottom: 0.5rem;
}

.navbar-brand img, .navbar-brand span {
  margin-left: $sp-logo-margin-x;
  margin-right: $sp-logo-margin-x;
  margin-top: $sp-logo-margin-y;
  margin-bottom: $sp-logo-margin-y;
  display: block;
  max-height: $sp-logo-max-height;
  max-width: $sp-logo-max-width;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.breadcrumb-container {
  background-color: $panel-bg;
}

/* for mobile app */
.navbar-inverse.is-native {
  background-color: #405060;
}

nav {
  margin-bottom: 0px;
  border-radius: 0px;

 .toggle-dropdown {
    height: 60px;
  }

}

.navbar-right {
  padding-right: 0px;
  padding-left: 7px;
}

.navbar-nav {
margin: 0px;
}

// PRB711244: Dropdown menu is scrollable when too many items
.scrollable-dropdown {
  max-height: 80vh;
  overflow: auto;
  height: auto;
}

.is-native {
 .scrollable-dropdown {
  max-height: 100vh;
  overflow: scroll;
  height: auto;
	}
}


/* PRB923910: Fix for Service Portal - Header Poorly Aligned in Safari */
@media screen and (min-width: 768px) {
  .navbar-right {
    display: flex !important;
  }
}


div#custom_header_text {


   display: block;


   position: fixed;


   top: $sp-logo-max-height / 2;


   left: $sp-logo-max-width + 25px;


}

Result:

Steps:

you need to clone the Stock Header widget and use the above script and save it and then you need to set the cloned widget into the header field. 

any update on this thread.

if your query has resolved kindly mark the answer as correct and close this thread. 

any update on this thread.

if your query has resolved kindly mark the answer as correct and close this thread.