Commit e13d77ad authored by Author Pat Kira's avatar Author Pat Kira Committed by Robert Lyon

Bug 1698257: Make header height adjustable using navbar-height variable

- Fix header display with or without site messages

behatnotneeded

Change-Id: Ib93e2ad8a92050fe24557c44e0888af7ebfaacef
(cherry picked from commit b3dd75ed)
parent e6df7bf4
......@@ -12,11 +12,4 @@
}
}
}
+ .container {
margin-top: 0;
@media (min-width: $screen-sm-min) {
margin-top: 50px;
}
}
}
......@@ -16,13 +16,3 @@ body {
}
}
}
@for $i from 1 through 5 {
.header.message-count-#{$i} {
+ .main-content {
@media (min-width: $screen-sm-min) {
margin-top: ($i * 33px) + 40px;
}
}
}
}
.site-messages {
~ .header {
top: 33px; //for one message
+ .main-nav {
margin-top: 32px; //for one message
}
}
}
//adjust header and fixed elements for sitemessages
@for $i from 1 through 5 {
.header.message-count-#{$i} {
top: 33px * $i;
@media (max-width: $screen-sm-min) {
top: 0;
}
+ .main-nav {
margin-top: $i * 32px;
@media (max-width: $screen-sm-min) {
margin-top: 0;
}
}
~ .container {
.toolbar-affix.affix {
margin-top: $i * 33px;
}
}
+ .container {
// if container is directly after header, then it will need a margin
margin-top: $i * 33px;
}
}
}
\ No newline at end of file
/*
* Base structure
*/
body {
@media (max-width: $screen-sm-min - 1) {
padding-top: 0;
}
.main-content {
margin-top: 0;
padding-top: 20px;
.main {
padding-top: 20px;
}
}
&.admin {
.container {
margin-top: 0px;
}
.main-nav {
.container {
margin-top: 0px;
}
}
.main-content {
margin-top: 0;
padding-top: 20px;
}
}
.sidebar {
padding-top: 0px;
}
}
\ No newline at end of file
......@@ -3,7 +3,6 @@
// General customisation and component files go here...
@import "../layout/col-collapse";
@import "../layout/layout";
@import "../layout/footer";
@import "../layout/header";
@import "../layout/profile-block";
......@@ -19,7 +18,6 @@
// Forms
@import "../form/form-group";
@import "../form/site-messages";
// Components - small reusable design elements
@import "../components/arrow-bar";
......
......@@ -49,11 +49,8 @@
.toolbar-affix.affix {
position: fixed;
top: 70px;
top: 30px;
z-index: 1;
@media (max-width: $screen-sm-min) {
top: 0;
}
}
.layoutthumb {
......
......@@ -32,13 +32,15 @@
~ .container {
.toolbar-affix.affix {
margin-top: $i * 33px;
@media (min-width: $screen-sm-min) {
margin-top: $navbar-height + ($i * 33px);
}
}
}
+ .main-content {
@media (min-width: $screen-sm-min) {
margin-top: $i * 33px;
margin-top: $navbar-height + ($i * 33px);
}
}
}
......@@ -48,6 +50,13 @@
.no-site-messages {
top: 0;
padding-top: 0;
+ .main-content,
+ .main-content .toolbar-affix.affix {
@media (min-width: $screen-sm-min) {
margin-top: $navbar-height;
}
}
}
.errmsg {
......
......@@ -12,13 +12,13 @@
float: left;
}
// CHANGE this value to switch between large and small logo
$screen-width-small-logo: 415px;
.logo {
margin: 6px 15px 6px 0;
padding: 6px 15px 6px 0;
display: inline-block;
// logo restricted to 45px - custom work required for a larger version
height: 45px;
height: $navbar-height; // CHANGE this value
// When small logo is uploaded 'change-to-small' class is added.
&.change-to-small {
......@@ -57,10 +57,11 @@
margin: 18px 10px 5px 0;
}
}
// if container is directly after header, then it will need a margin
+ .container {
.navbar-main.navbar {
min-height: auto;
@media (min-width: $screen-sm-min) {
margin-top: 30px;
height: $navbar-height; // CHANGE this value
}
}
}
......@@ -3,12 +3,9 @@
*/
body {
max-width: 100%;
@media (min-width: 768px) {
padding-top: 65px; // Move down content because we have a fixed navbar on desktop/tablet that is 50px tall
}
.main {
margin: 0px 0 20px;
margin: 0 0 20px;
padding-top: 30px;
padding-bottom: 0;
@media (min-width: $screen-sm-min) {
......
......@@ -18,10 +18,6 @@
position: relative;
}
@media (min-width: $screen-sm-min) {
max-height: $navbar-height;
}
.nav-toggle-area {
float: right;
padding: 10px 0;
......
......@@ -44,6 +44,7 @@
{if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}
</div>
{/if}
<header class="header navbar-fixed-top no-site-messages">
<div class="navbar navbar-default navbar-main">
<div class="container">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment