summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorgit2017-04-10 16:30:57 -0500
committerMark Carver2017-04-10 16:30:57 -0500
commit33442580eac1d53ec91c5c18a8437fcd2c014395 (patch)
treeb9cad499f08ff3b8e599c47e290e71cc0176ddd4
parentea2fb3c38ae8e66f30762264a28729a0f00eb18d (diff)
Issue #2857303 by njagojevic, markcarver, mvogel: Navbar site_logo is outside of the container for width < 768px
-rw-r--r--starterkits/less/less/component/navbar.less20
-rw-r--r--starterkits/sass/scss/component/_navbar.scss21
2 files changed, 33 insertions, 8 deletions
diff --git a/starterkits/less/less/component/navbar.less b/starterkits/less/less/component/navbar.less
index 6b0cd43..252700f 100644
--- a/starterkits/less/less/component/navbar.less
+++ b/starterkits/less/less/component/navbar.less
@@ -1,10 +1,11 @@
/**
* Navbar styling.
*/
-@mobile: ~"screen and (max-width: @{screen-xs-max})";
-@tablet: ~"screen and (min-width: @{screen-sm-min})";
-@normal: ~"screen and (min-width: @{screen-md-min})";
-@wide: ~"screen and (min-width: @{screen-lg-min})";
+@mobile: ~"screen and (max-width: @{screen-xs-max})";
+@tablet: ~"screen and (min-width: @{screen-sm-min})";
+@normal: ~"screen and (min-width: @{screen-md-min})";
+@wide: ~"screen and (min-width: @{screen-lg-min})";
+@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";
body {
// Fix horizontal scrolling on iOS devices.
@@ -54,3 +55,14 @@ body {
max-width: ((@container-lg - @grid-gutter-width));
}
}
+
+// Branding.
+.navbar .logo {
+ margin-right: -(@grid-gutter-width / 2);
+ padding-left: (@grid-gutter-width / 2);
+ padding-right: (@grid-gutter-width / 2);
+ @media @grid-breakpoint {
+ margin-right: 0;
+ padding-left: 0;
+ }
+}
diff --git a/starterkits/sass/scss/component/_navbar.scss b/starterkits/sass/scss/component/_navbar.scss
index f34f416..3130142 100644
--- a/starterkits/sass/scss/component/_navbar.scss
+++ b/starterkits/sass/scss/component/_navbar.scss
@@ -1,10 +1,11 @@
/**
* Navbar styling.
*/
-$mobile: "screen and (max-width: #{$screen-xs-max})";
-$tablet: "screen and (min-width: #{$screen-sm-min})";
-$normal: "screen and (min-width: #{$screen-md-min})";
-$wide: "screen and (min-width: #{$screen-lg-min})";
+$mobile: "screen and (max-width: #{$screen-xs-max})";
+$tablet: "screen and (min-width: #{$screen-sm-min})";
+$normal: "screen and (min-width: #{$screen-md-min})";
+$wide: "screen and (min-width: #{$screen-lg-min})";
+$grid-breakpoint: "screen and (min-width: #{$grid-float-breakpoint})";
body {
// Fix horizontal scrolling on iOS devices.
@@ -54,3 +55,15 @@ body {
max-width: (($container-lg - $grid-gutter-width));
}
}
+
+// Branding.
+.navbar .logo {
+ margin-right: -($grid-gutter-width / 2);
+ padding-left: ($grid-gutter-width / 2);
+ padding-right: ($grid-gutter-width / 2);
+ @media #{$grid-breakpoint} {
+ margin-right: 0;
+ padding-left: 0;
+ }
+}
+