Skip to content

Commit

Permalink
rewrite navbar once more for lower key styles and a new take on modif…
Browse files Browse the repository at this point in the history 
…iers for improved customization
  • Loading branch information
@mdo
mdo committed Aug 18, 2015
1 parent d073a3b commit d6b6a20
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 149 deletions.
121 changes: 90 additions & 31 deletions docs/components/navbar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Navbar
group: components
---

The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.
The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.

## Contents

Expand All @@ -28,11 +28,12 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc
- `.navbar-brand` for your company, product, or project name
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
- `.navbar-form` for vertically centering default-sized inputs and buttons.
- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors.

Here's an example of all the sub-components included in a default, light navbar:

{% example html %}
<nav class="navbar navbar-default">
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
Expand All @@ -55,48 +56,106 @@ Here's an example of all the sub-components included in a default, light navbar:
</nav>
{% endexample %}

## Inverse theme
## Color schemes

When you want a darker navbar with light text colors, replace the `.navbar-default` with `.navbar-inverse`.
Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.

{% example html %}
<nav class="navbar navbar-inverse">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
Here are some examples to show what we mean.

<div class="bd-example">
<nav class="navbar navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-info-outline" type="submit">Search</button>
</form>
</nav>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary-outline" type="submit">Search</button>
</form>
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary-outline" type="submit">Search</button>
</form>
</nav>
</div>

{% highlight html %}
<nav class="navbar navbar-dark bg-inverse">
<!-- Navbar content -->
</nav>
{% endexample %}

<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>
{% endhighlight %}

## Containers

Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of the navbar.

{% example html %}
<div class="container">
<nav class="navbar navbar-default">
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
{% endexample %}

{% example html %}
<nav class="navbar navbar-default">
<nav class="navbar navbar-light bg-faded">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
Expand All @@ -109,12 +168,12 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con

{% example html %}
<div class="collapse" id="exCollapsingNavbar">
<div class="inverse p-a">
<div class="bg-inverse p-a">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-default">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
&#9776;
</button>
Expand All @@ -124,7 +183,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
For more complex navbar patterns, like those used in Bootstrap v3, use the `.navbar-toggleable-*` classes in conjunction with the `.navbar-toggler`. These classes override our responsive utilities to show navigation only when content is meant to be shown.

{% example html %}
<nav class="navbar navbar-default">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
&#9776;
</button>
Expand Down
103 changes: 34 additions & 69 deletions scss/_navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

.navbar {
position: relative;
padding: $navbar-padding-vertical $navbar-padding-horizontal;
@include clearfix;

@include media-breakpoint-up(sm) {
Expand Down Expand Up @@ -69,13 +70,12 @@

.navbar-brand {
float: left;
padding: .95rem 1rem;
margin-right: 1rem;
padding-top: .25rem;
padding-bottom: .25rem;
font-size: $font-size-lg;
line-height: 1;
color: $navbar-default-brand-color;

@include hover-focus {
color: $navbar-default-brand-hover-color;
text-decoration: none;
}

Expand All @@ -92,11 +92,8 @@

.navbar-toggler {
padding: .5rem .75rem;
margin-top: .375rem;
margin-bottom: .375rem;
font-size: $font-size-lg;
line-height: 1;
color: $navbar-default-link-color;
background: none;
border: $border-width solid transparent;
@include border-radius($btn-border-radius);
Expand Down Expand Up @@ -132,83 +129,56 @@

.nav-link {
display: block;
padding: .95rem .75rem;
line-height: 1.25; // Match the `.navbar-brand`
color: $navbar-default-link-color;

@include hover-focus {
color: $navbar-default-link-hover-color;
background-color: $navbar-default-link-hover-bg;
}
}

.open > .nav-link,
.active > .nav-link,
.nav-link.open,
.nav-link.active {
@include plain-hover-focus {
color: $navbar-default-link-active-color;
cursor: default;
background-color: $navbar-default-link-active-bg;
}
padding: .425rem .5rem;
}
}


// Forms
//
// Additional modifier class to add to `.form-inline` to vertically center forms.

.navbar-form {
margin-top: .375rem;
margin-bottom: .375rem;
margin-right: 1rem;
}


//
// Alternate navbars
//

// todo: audit these styles

// Default navbar
.navbar-default {
background-color: $navbar-default-bg;
border-color: $navbar-default-border;

// Dark links against a light background
.navbar-light {
.navbar-brand {
color: $navbar-default-brand-color;
color: $navbar-light-active-color;

@include hover-focus {
color: $navbar-default-brand-hover-color;
background-color: $navbar-default-brand-hover-bg;
color: $navbar-light-active-color;
}
}
}

// Inverse navbar
.navbar-nav {
.nav-link {
color: $navbar-light-color;

.navbar-inverse {
background-color: $navbar-inverse-bg;
border-color: $navbar-inverse-border;
@include hover-focus {
color: $navbar-light-hover-color;
}
}

.open > .nav-link,
.active > .nav-link,
.nav-link.open,
.nav-link.active {
@include plain-hover-focus {
color: $navbar-light-active-color;
}
}
}
}

// White links against a dark background
.navbar-dark {
.navbar-brand {
color: $navbar-inverse-brand-color;
color: $navbar-dark-active-color;

@include hover-focus {
color: $navbar-inverse-brand-hover-color;
background-color: $navbar-inverse-brand-hover-bg;
color: $navbar-dark-active-color;
}
}

.navbar-nav {
.nav-link {
color: $navbar-inverse-link-color;
color: $navbar-dark-color;

@include hover-focus {
color: $navbar-inverse-link-hover-color;
background-color: $navbar-inverse-link-hover-bg;
color: $navbar-dark-hover-color;
}
}

Expand All @@ -217,13 +187,8 @@
.nav-link.open,
.nav-link.active {
@include plain-hover-focus {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
color: $navbar-dark-active-color;
}
}
}

.navbar-toggler {
color: $navbar-inverse-link-color;
}
}
Loading

0 comments on commit d6b6a20

Please sign in to comment.