Header widget in the service portal
Hi Ramu,
I tried to wrap the header with the container. Its behaving differently. If you achieved this. Kindly let me know.
Original:
Width shirnked to center of the page after container.
below is my code setup
HTML:
<div class="container">
<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}}">
<img ng-src="{{::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 id="title_message" class="menu navbar-header">
<div class="top-navigation top-navigation1">
<ul>
<li><a target="_blank" id="news" href="http://intranet.XXXXXX.org/operations">Operations & Knowledge</a></li>
<li><a target="_blank" id="countries" href="http://intranet.XXXXXX.org/news">News & Events</a></li>
<li><a target="_blank" id="topics" href="http://intranet.XXXXXXX.org/people">People</a></li>
<li><a target="_blank" id="units" href="http://intranet.XXXXXX.org/organization">Organization</a></li>
<li><a target="_blank" id="myhr" href="http://intranet.XXXXXXX.org/services">Staff Services</a></li>
</ul>
</div>
</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">
<!-- chat, avatar, and logout -->
<!-- <li ng-if="::data.connect_support_queue_id"><a href ng-click="openPopUp()">${Live Chat}</a></li> -->
<li class="dropdown hidden-xs">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="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">
<li><a ng-href="?id=user_profile&sys_id={{::user.sys_id}}">${Profile}</a></li>
<li><a href="{{::portal.logoutUrl}}">${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 class="visible-xs-block"><a href="{{::portal.logoutUrl}}">${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: 5px solid $sp-navbar-divider-color;
background-color: #03456b;
}
@media screen and (max-width: 600px) {
#title_message {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
.menu{
height:45px;
min-height:45px;
}
.navbar-fade {
opacity: 0.4;
}
.navbar-inverse .navbar-toggle {
border-color: rgba(255, 255, 255, 0.25);
}
.nav > li > a {
max-height: 50px;
color:white;
}
.navbar-brand{
margin-top:3px;
margin-bottom:3px;
height: 48px;
padding: 0;
}
.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;
}
.top-navigation {border-bottom:none !important;height:47px; margin:3px 5px; border-left:1px solid #477793;}
#top-icons{margin-right:0px;}
.top-navigation1 ul li a, .top-navigation1 ul li a:hover, .top-navigation1 ul li a:visited {
height: 47.5px;
}
.top-navigation ul li a, .top-navigation ul li a:hover, .top-navigation ul li a:visited {
color: #fff !important;
display: block;
padding:15px;
text-decoration: none;
}
.top-navigation1 ul li a.active{ background-color:#256990}
.top-navigation ul li a:hover{ background-color: #256990;}
.top-navigation ul, .top-navigation ul li {
float: left;
list-style-type: none;
}
.topNavbg{
background-color: #d7ecf1;
}
.topNav li.active{
background-color: #7abccd;
}
.topNav li.active a{
color: #fff;
}
.navbar-header a.navbar-brand:hover { background-color:#256990 }
