Create class to scope main header changes (avoids overriding too much Bootstrap stuff); apply styles.

This commit is contained in:
Paulo Reis 2018-02-15 11:08:12 +00:00
parent f1717bfa1f
commit ebad9091c7
2 changed files with 17 additions and 3 deletions

View file

@ -1,4 +1,4 @@
nav.navbar.navbar-default
nav.navbar.navbar-default.navbar-main
.container-fluid
.navbar-header
button.navbar-toggle(ng-init="navCollapsed = true", ng-click="navCollapsed = !navCollapsed", ng-class="{active: !navCollapsed}")

View file

@ -52,7 +52,6 @@
overflow-x: visible;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
//border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
&:extend(.clearfix all);
-webkit-overflow-scrolling: touch;
@ -89,6 +88,22 @@
}
.navbar-main {
z-index: 1;
.container-fluid > .navbar-collapse {
// High specificity needed to override Bootstrap's default.
margin: 0;
}
.navbar-collapse {
position: absolute;
left: 0;
width: 100%;
margin: 0;
background-color: @navbar-default-bg;
border-bottom: solid 1px @navbar-default-border;
padding: @navbar-default-padding;
}
}
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
@ -383,7 +398,6 @@
top: 0;
width: 100%;
height: @header-height;
z-index: 1;
.navbar-brand {
position: absolute;