Good Day,
I am trying to move the header menu on the left-hand side from the right side which is by default.
any leads will be appreciated.
1 ACCEPTED SOLUTION
Hi Brad,
I've done some work but no luck any input will be highly appreciated.
So far, I have cloned the header menu widget (Service Portal -> Portal -> Service Portal -> Main Menu -> Opened the record -> Header Menu Widget ( Scroll Down) )-> Cloned it.
I updated the CSS to below but no luck and
.navbar-right {
padding-right: 0px;
padding-left: 7px;
float:left;
}
when i inspect the element on google chrome
Body HTML :
<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>
<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-header{
float:left;
}
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;
float:left;
}
.navbar-nav {
margin: 0px;
float:left;
}
// 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;
}
}
/* Transparent Menu Bar */
.navbar-inverse.navbar {
border-bottom: 0px;
position: absolute;
width: 99%;
z-index: 200;
float:left;
}
