How to display the Service Portal Banner Title

[SNOW46]

Hello All,

I want to display some banner title on Service Portal Homepage..

But can't able to show it on Portal.

 

Can anyone let me know how to add some text on banner?

Thanks

[Harsh Vardhan]

kindly refer the below thread. you will get an answer there. 

https://community.servicenow.com/community?id=community_question&sys_id=c58743a9db1cdbc01dcaf3231f96...

[Harsh Vardhan]

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. 

[Harsh Vardhan]

any update on this thread.

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

[Harsh Vardhan]

any update on this thread.

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