2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00

try out a different navbar approach

This commit is contained in:
Mark Otto
2017-05-28 17:49:46 -07:00
parent 9c4d588f0b
commit 930012f29a
5 changed files with 90 additions and 49 deletions
+26 -4
View File
@@ -5,17 +5,39 @@
//
.bd-navbar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1030; // over everything in bootstrap
min-height: 4rem;
background-color: $bd-purple;
border-bottom: 1px solid rgba(0,0,0,.1);
box-shadow: 0 .5rem 1rem rgba(0,0,0,.05);
@include media-breakpoint-down(md) {
.navbar-nav-scroll {
max-width: 100%;
height: 2.5rem;
margin-top: .25rem;
overflow-x: hidden;
font-size: .85rem;
.navbar-nav {
padding-bottom: 2rem;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
}
}
@include media-breakpoint-up(md) {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1030; // over everything in bootstrap
}
.navbar-nav {
.nav-link {
padding-right: .5rem;
padding-left: .5rem;
color: $bd-purple-light;
&.active,
+19
View File
@@ -61,6 +61,11 @@
.bd-links {
margin-right: -15px;
margin-left: -15px;
// Override collapse behaviors
@include media-breakpoint-up(md) {
display: block !important;
}
}
.bd-search {
@@ -69,10 +74,18 @@
padding-bottom: 1rem;
}
.bd-search-docs-toggle {
line-height: 1;
color: $gray-dark;
}
// Docsearch overrides
//
// `!important` indicates overridden properties.
.algolia-autocomplete {
display: block !important;
flex: 1;
// Menu container
.ds-dropdown-menu {
width: 100%;
@@ -115,6 +128,12 @@
display: none !important;
}
.algolia-docsearch-suggestion--text {
padding-top: .5rem;
padding-bottom: .5rem;
font-weight: normal;
}
.algolia-docsearch-suggestion--highlight {
color: #5f2dab;
background-color: rgba(154, 132, 187, .12);