Commit b3dd75ed authored by Author Pat Kira's avatar Author Pat Kira Committed by Pat Kira

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

- Fix header display with or without site messages

behatnotneeded

Change-Id: Ib93e2ad8a92050fe24557c44e0888af7ebfaacef
parent 946d2b31
...@@ -12,11 +12,4 @@ ...@@ -12,11 +12,4 @@
} }
} }
} }
+ .container {
margin-top: 0;
@media (min-width: $screen-sm-min) {
margin-top: 50px;
}
}
} }
...@@ -16,13 +16,3 @@ body { ...@@ -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 @@ ...@@ -3,7 +3,6 @@
// General customisation and component files go here... // General customisation and component files go here...
@import "../layout/col-collapse"; @import "../layout/col-collapse";
@import "../layout/layout";
@import "../layout/footer"; @import "../layout/footer";
@import "../layout/header"; @import "../layout/header";
@import "../layout/profile-block"; @import "../layout/profile-block";
...@@ -19,7 +18,6 @@ ...@@ -19,7 +18,6 @@
// Forms // Forms
@import "../form/form-group"; @import "../form/form-group";
@import "../form/site-messages";
// Components - small reusable design elements // Components - small reusable design elements
@import "../components/arrow-bar"; @import "../components/arrow-bar";
......
...@@ -49,11 +49,8 @@ ...@@ -49,11 +49,8 @@
.toolbar-affix.affix { .toolbar-affix.affix {
position: fixed; position: fixed;
top: 70px; top: 30px;
z-index: 1; z-index: 1;
@media (max-width: $screen-sm-min) {
top: 0;
}
} }
.layoutthumb { .layoutthumb {
......
...@@ -32,13 +32,15 @@ ...@@ -32,13 +32,15 @@
~ .container { ~ .container {
.toolbar-affix.affix { .toolbar-affix.affix {
margin-top: $i * 33px; @media (min-width: $screen-sm-min) {
margin-top: $navbar-height + ($i * 33px);
}
} }
} }
+ .main-content { + .main-content {
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
margin-top: $i * 33px; margin-top: $navbar-height + ($i * 33px);
} }
} }
} }
...@@ -48,6 +50,13 @@ ...@@ -48,6 +50,13 @@
.no-site-messages { .no-site-messages {
top: 0; top: 0;
padding-top: 0; padding-top: 0;
+ .main-content,
+ .main-content .toolbar-affix.affix {
@media (min-width: $screen-sm-min) {
margin-top: $navbar-height;
}
}
} }
.errmsg { .errmsg {
......
...@@ -12,13 +12,13 @@ ...@@ -12,13 +12,13 @@
float: left; float: left;
} }
// CHANGE this value to switch between large and small logo
$screen-width-small-logo: 415px; $screen-width-small-logo: 415px;
.logo { .logo {
margin: 6px 15px 6px 0; padding: 6px 15px 6px 0;
display: inline-block; display: inline-block;
// logo restricted to 45px - custom work required for a larger version height: $navbar-height; // CHANGE this value
height: 45px;
// When small logo is uploaded 'change-to-small' class is added. // When small logo is uploaded 'change-to-small' class is added.
&.change-to-small { &.change-to-small {
...@@ -57,10 +57,11 @@ ...@@ -57,10 +57,11 @@
margin: 18px 10px 5px 0; 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) { @media (min-width: $screen-sm-min) {
margin-top: 30px; height: $navbar-height; // CHANGE this value
} }
} }
} }
...@@ -3,12 +3,9 @@ ...@@ -3,12 +3,9 @@
*/ */
body { body {
max-width: 100%; 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 { .main {
margin: 0px 0 20px; margin: 0 0 20px;
padding-top: 30px; padding-top: 30px;
padding-bottom: 0; padding-bottom: 0;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
......
...@@ -18,10 +18,6 @@ ...@@ -18,10 +18,6 @@
position: relative; position: relative;
} }
@media (min-width: $screen-sm-min) {
max-height: $navbar-height;
}
.nav-toggle-area { .nav-toggle-area {
float: right; float: right;
padding: 10px 0; padding: 10px 0;
......
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
{if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP} {if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}
</div> </div>
{/if} {/if}
<header class="header navbar-fixed-top no-site-messages"> <header class="header navbar-fixed-top no-site-messages">
<div class="navbar navbar-default navbar-main"> <div class="navbar navbar-default navbar-main">
<div class="container"> <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