mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-21 13:29:00 +01:00
try out a different navbar approach
This commit is contained in:
Mark Otto
parent
9c4d588f0b
commit
930012f29a
1
docs/_includes/icons/menu.svg
Normal file
1
docs/_includes/icons/menu.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
|
||||
|
After Width: | Height: | Size: 373 B |
@ -1,9 +1,11 @@
|
||||
<form class="bd-search">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
|
||||
<div class="dropdown-menu bd-search-results" id="search-results"></div>
|
||||
<button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs avigation">
|
||||
{% include icons/menu.svg class="" width="30" height="30" %}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<nav class="bd-links" id="docsNavbarContent">
|
||||
<nav class="collapse bd-links" id="bd-docs-nav">
|
||||
{% assign page_slug = page.url | split: '/' | last %}
|
||||
{% for group in site.data.nav %}
|
||||
{% assign link = group.pages | first %}
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
<header class="navbar navbar-inverse navbar-sticky-top navbar-expand-md bd-navbar">
|
||||
<a class="navbar-brand" href="{{ site.baseurl }}/">
|
||||
<header class="navbar navbar-inverse navbar-expand-md flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/">
|
||||
{% include icons/bootstrap.svg width="40" height="40" class="d-block" %}
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="bd-main-nav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
@ -27,39 +24,39 @@
|
||||
<a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto my-3 my-md-0">
|
||||
{% comment %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v{{ site.current_version }}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item" href="{{ site.baseurl }}/v4">Bootstrap 4</a>
|
||||
<a class="dropdown-item" href="{{ site.baseurl }}/3.3.7/">Bootstrap v3.3.7</a>
|
||||
<a class="dropdown-item" href="{{ site.baseurl }}/2.3.2/">Bootstrap v2.3.2</a>
|
||||
<a class="dropdown-item" href="{{ site.baseurl }}/releases/">All versions...</a>
|
||||
</div>
|
||||
</li>
|
||||
{% endcomment %}
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="{{ site.repo }}">
|
||||
{% include icons/github.svg class="navbar-nav-svg" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}">
|
||||
{% include icons/twitter.svg class="navbar-nav-svg" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="{{ site.slack }}">
|
||||
{% include icons/slack.svg class="navbar-nav-svg" %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-outline-secondary mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto">
|
||||
{% comment %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v{{ site.current_version }}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item" href="{{ site.baseurl }}/v4">Bootstrap 4</a>
|
||||
<a class="dropdown-item" href="{{ site.baseurl }}/3.3.7/">Bootstrap v3.3.7</a>
|
||||
<a class="dropdown-item" href="{{ site.baseurl }}/2.3.2/">Bootstrap v2.3.2</a>
|
||||
<a class="dropdown-item" href="{{ site.baseurl }}/releases/">All versions...</a>
|
||||
</div>
|
||||
</li>
|
||||
{% endcomment %}
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="{{ site.repo }}">
|
||||
{% include icons/github.svg class="navbar-nav-svg" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}">
|
||||
{% include icons/twitter.svg class="navbar-nav-svg" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="{{ site.slack }}">
|
||||
{% include icons/slack.svg class="navbar-nav-svg" %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-outline-secondary d-none d-md-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
|
||||
</header>
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user