Issue #3229246 by pivica: Improve header layout (ce84c834) · Commits · project / bs_base

themes/bs_bootstrap/sass/components/partials/_navbar-offcanvas.scss

+5 −4

Changes for themes/bs_bootstrap/sass/components/partials/_navbar-offcanvas.scss: 5 added lines, 4 removed lines.
Original line number	Diff line number	Diff line
		@@ -152,7 +152,9 @@
		// Navmenu and offcanvas navbar
		//
		// Light implementation of libraries/jasny-bootstrap/scss/_navmenu.scss.
		//@include jasny-bootstrap-navmenu();
		// Apply navmenu base rules only for when navbar is collapsed so we avoid
		// leaking of this styles for bigger screens.
		@include media-responsive-breakpoint-down($navbar-collapse-responsive-break) {
		.navmenu {
		width: $navbar-offcanvas-width;
		// Do not allow sidebar navmenu which is bigger then viewport width. When
		@@ -162,7 +164,7 @@
		height: auto;
		border-width: 1px;
		border-style: solid;
		border-radius: $border-radius;
		}
		}
		// Fixed iphone with disableScrolling
		// @todo - this is creating a problems it seems now with our bs_bootstrap
		@@ -183,8 +185,6 @@
		.navmenu-fixed-left,
		.navmenu-fixed-right,
		.navbar-offcanvas {
		border-radius: 0;

		// We need this rules only when off canvas is active so this rules does not
		// mess regular horizontal navigation - specially we need this for z-index.
		@include media-responsive-breakpoint-down($navbar-collapse-responsive-break) {
		@@ -327,3 +327,4 @@

		// @todo Off canvas left option is still not supported fully.
		@include navbar-offcanvas('right');

+4 −1

Changes for themes/bs_bootstrap/sass/components/partials/_navbar-second-level-horizontal.scss: 4 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -6,7 +6,6 @@ $navbar-second-level-height: calc(#{$navbar-2nd-link-padding-x + $navbar-2nd-lin
		.navbar-wrapper {
		// Create space and background style for second level horizontal navigation.
		&.second-level-expanded {
		position: relative;
		// Claim the space for 2nd navigation line.
		@if ($navbar-second-level-height) {
		#{$navbar-second-level-distance-type}-bottom: $navbar-second-level-height;
		@@ -20,6 +19,10 @@ $navbar-second-level-height: calc(#{$navbar-2nd-link-padding-x + $navbar-2nd-lin
		}
		}

		.navbar-nav {
		position: relative;
		}

		&.second-level-expanded,
		&.second-level-hover {
		&::after {

+0 −9

Changes for themes/bs_bootstrap/sass/components/partials/_navigation.scss: 0 added lines, 9 removed lines.
Original line number	Diff line number	Diff line
		@@ -123,11 +123,6 @@ body.toolbar-fixed .toolbar-oriented .toolbar-bar {
		}
		}

		.btn {
		margin-right: $navbar-nav-link-padding-x;
		margin-left: $navbar-nav-link-padding-x;
		}

		@if $header-link-hover-border-width {
		a.nav-link {
		@include link-hover-active-line-effect(
		@@ -157,10 +152,6 @@ body.toolbar-fixed .toolbar-oriented .toolbar-bar {
		}
		}

		.btn {
		margin: $navbar-small-dropdown-link-padding-y $navbar-small-dropdown-link-padding-x;
		}

		.dropdown-menu {
		margin-top: 0;
		padding: $navbar-small-dropdown-menu-padding;

+1 −0

Changes for themes/bs_bootstrap/sass/layout/page.scss: 1 added line, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -2,5 +2,6 @@
		@import "bs_base/sass/layout/partials/page-expand";
		@import "partials/layout";
		@import "partials/header";
		@import "partials/header-layout-align";
		@import "partials/main";
		@import "partials/footer";

0 → 100644

+49 −0

Changes for themes/bs_bootstrap/sass/layout/partials/_header-layout-align.scss: 49 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		// Introduce proper grid gutter to header regions blocks and apply navigation
		// links padding value as negative margin to nav wrapper.
		//
		// NOTE: This solution assumes that region-navigation-second blocks are shown
		// only for small screens. If you have blocks there that are shown for big
		// screens you need to apply next CSS rule to the first block:
		// @include media-breakpoint-up($navbar-collapse-responsive-break) {
		// .region-navigation-second > .block:first-item {
		// padding-left: 3*$grid-gutter-width/2;
		// }
		// }
		// This rule will properly make space between first block in
		// region-navigation-second last block in region-navbar.
		.page__header {
		.region:not(.region-navbar) {
		margin-right: -$grid-gutter-width/2;
		margin-left: -$grid-gutter-width/2;

		.block {
		padding-right: $grid-gutter-width/2;
		padding-left: $grid-gutter-width/2;
		}

		.nav {
		margin-right: -$nav-link-padding-x;
		margin-left: -$nav-link-padding-x;
		}
		}

		// For the main navbar navigation we apply this rules only for not
		// mobile/collapsed version on big screens.
		@include media-breakpoint-up($navbar-collapse-responsive-break) {
		.region-navbar {
		margin-right: -$grid-gutter-width/2;
		margin-left: -$grid-gutter-width/2;

		.block {
		padding-right: $grid-gutter-width/2;
		padding-left: $grid-gutter-width/2;
		}

		.navbar-nav {
		margin-right: -$navbar-nav-link-padding-x;
		margin-left: -$navbar-nav-link-padding-x;
		}
		}
		}
		}