Adjusting headers to make them horizontally aligned to the content
This commit is contained in:
parent
d8c13c9ac2
commit
b6503748ca
4 changed files with 150 additions and 126 deletions
|
@ -2,12 +2,16 @@ body {
|
|||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
.header .container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
background-image: url('../img/logo.png');
|
||||
height: 25px;
|
||||
background-repeat: no-repeat;
|
||||
width: 103px;
|
||||
margin: 3px 20px 5px;
|
||||
margin: 3px 10px 5px;
|
||||
text-indent: -99999px;
|
||||
}
|
||||
|
||||
|
@ -39,6 +43,11 @@ body {
|
|||
border-top-color: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.navbar-nav > li > .dropdown-menu {
|
||||
left: 15px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.navbar-pf .navbar-primary li.dropdown.context > a {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
@ -64,15 +73,20 @@ body {
|
|||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.navbar-pf .navbar-utility {
|
||||
right: 15px;
|
||||
top: -34px;
|
||||
}
|
||||
|
||||
.navbar-pf .navbar-utility li.dropdown > .dropdown-toggle {
|
||||
border-left: none;
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
padding-bottom: 12px;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.navbar-pf .navbar-utility li.dropdown > .dropdown-toggle .pficon-user {
|
||||
top: 10px;
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
.navbar-pf .navbar-utility > li > a:hover,
|
||||
|
|
|
@ -69,6 +69,7 @@
|
|||
<header class="navbar navbar-default navbar-pf navbar-main header">
|
||||
<nav id="kc-navigation" class="navbar" role="navigation">
|
||||
<div class="navbar-header">
|
||||
<div class="container">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
|
@ -77,7 +78,9 @@
|
|||
</button>
|
||||
<h1 class="navbar-title"><Strong>KeyCloak</Strong> Central Login</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse navbar-collapse-1">
|
||||
<div class="container">
|
||||
<ul class="nav navbar-nav navbar-utility" data-ng-show="auth.loggedIn">
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
|
||||
|
@ -149,6 +152,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<nav id="kc-navigation" class="navbar" role="navigation">
|
||||
<div class="navbar-header">
|
||||
<div class="container">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
|
@ -8,7 +9,9 @@
|
|||
</button>
|
||||
<h1 class="navbar-title">Keycloak</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse navbar-collapse-1">
|
||||
<div class="container">
|
||||
<ul class="nav navbar-nav navbar-utility" data-ng-show="auth.loggedIn">
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
|
||||
|
@ -39,6 +42,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- TODO remove once this page is properly styled -->
|
||||
<style type="text/css">
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
<header class="navbar navbar-default navbar-pf navbar-main header">
|
||||
<div>
|
||||
<nav class="navbar" role="navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<div class="navbar-title">
|
||||
</div>
|
||||
|
@ -32,6 +33,7 @@
|
|||
<li><a href="${url.logoutUrl}">Sign Out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
|
Loading…
Reference in a new issue