Hi All,
I wanted to change the Header menu font color.
Below is my HTML and CSS code.
HTML Code:
<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>{{::portal.title}}</span></a>
<a class="navbar-brand navbar-brand-logo" ng-if="::portal.logo" href="?id={{::portal.homepage_dv}}" 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-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">
<li><a href ng-click="openLogin()">${Login}</a></li>
</ul>
<ul ng-if="::user.logged_in" class="nav navbar-nav" aria-haspopup="true" data-toggle="dropdown">
<!-- chat, avatar, and logout -->
<li ng-if="::data.connect_support_queue_id"><a href ng-click="openPopUp()">${Live Chat}</a></li>
<li><sp-widget widget="data.languagePicker"></sp-widget></li>
<li class="dropdown hidden-xs">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="{{data.profileBtnMsg}}" id="profile-dropdown">
<span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="userID" /></span>
<span class="visible-lg-inline">{{::user.name}}</span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a ng-href="?id=user_profile&sys_id={{::user.sys_id}}" role="menuitem">${Profile}</a></li>
<!-- <li ng-if="::!isViewNative"><a href="{{::portal.logoutUrl}}" role="menuitem">${Logout}</a></li>-->
</ul>
</li>
<li class="visible-xs-block"><a ng-href="?id=user_profile&sys_id={{::user.sys_id}}"><span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="userID" /></span>{{::user.name}}</a></li>
<li ng-if="::!isViewNative" class="visible-xs-block"><a href="{{::portal.logoutUrl}}">${Logout}</a></li>
</ul>
</div>
</nav>
</div>
CSS Code:
.navbar {
transition: 250ms opacity ease-in-out;
-webkit-transition: 250ms opacity ease-in-out;
border: 0;
border-bottom: 4px solid $sp-navbar-divider-color;
background-color: #FFFFFF;
}
.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;
}
.navbar-collapse{
padding-right: 0px;
}
.navbar-nav {
margin: 0px;
}
/* PRB923910: Fix for Service Portal - Header Poorly Aligned in Safari */
@media screen and (min-width: 768px) {
.navbar-collapse {
display: flex !important;
}
}
Currently the header Menu looks like this:
I wanted the Font color to below, and while fading out the color should change to Red as highlighted in 'Home'
Can Someone please help me with this.
Have you tried using Branding Editor?
in the filter nav, type "service Portal Configuration"
Click on Branding editor,
choose your "portal"
and now you can customize your Navbar in "theme colors"
Have you tried using Branding Editor?
in the filter nav, type "service Portal Configuration"
Click on Branding editor,
choose your "portal"
and now you can customize your Navbar in "theme colors"
I hope this helps. let us know about your progress with this tip.
