From 5432e7621cf2e3c2188f8b438c9ba83c645aca15 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2016 17:51:35 -0800 Subject: [PATCH] move all nav link and collapse and container behaviors to the toggleable class generation area; this way the .navbar-toggleable-* goes on .navbar, easily affecting everything that needs updating for each breakpoint's use --- scss/_navbar.scss | 50 +++++++++++++++++++++++------------------------ 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/scss/_navbar.scss b/scss/_navbar.scss index a0d394d3ae..931daaedba 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -6,19 +6,6 @@ .navbar { position: relative; padding: $navbar-padding-y $navbar-padding-x; - - @include media-breakpoint-up(sm) { - display: flex; - flex-wrap: nowrap; - align-items: center; - } - - // For nesting containers, have to redeclare for alignment purposes - > .container { - display: flex; - flex-wrap: nowrap; - align-items: center; - } } .navbar-toggler-left { @@ -136,17 +123,6 @@ padding-top: .425rem; padding-bottom: .425rem; } - - @include media-breakpoint-up(sm) { - .nav-item { - display: inline-block; - } - - .nav-link { - padding-right: .5rem; - padding-left: .5rem; - } - } } @@ -269,8 +245,30 @@ } @include media-breakpoint-up($next) { - display: flex !important; - width: 100%; + display: flex; + flex-wrap: nowrap; + align-items: center; + + // For nesting containers, have to redeclare for alignment purposes + > .container { + display: flex; + flex-wrap: nowrap; + align-items: center; + } + + .navbar-collapse { + display: flex !important; + width: 100%; + } + + .nav-item { + display: inline-block; + } + + .nav-link { + padding-right: .5rem; + padding-left: .5rem; + } } } }