Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v4 hamburger icon fix #20260

Closed
wants to merge 3 commits into from
Closed

v4 hamburger icon fix #20260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f6aea91
use generated content for hamburger menu icon
patrickhlauke Jul 8, 2016
b779f1f
change navbar-togglers to use CSS generated content symbol
patrickhlauke Jul 8, 2016
6359b49
provide further context in comments
patrickhlauke Jul 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions docs/_includes/nav-home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,7 @@

<nav>
<div class="clearfix">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
Bootstrap
</a>
Expand Down
8 changes: 2 additions & 6 deletions docs/components/navbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,9 +241,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con

{% example html %}
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse p-a-1">
<h4>Collapsed content</h4>
Expand All @@ -257,9 +255,7 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav

{% example html %}
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Responsive navbar</a>
<ul class="nav navbar-nav">
Expand Down
4 changes: 1 addition & 3 deletions docs/examples/album/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,7 @@ <h4>Contact</h4>
</div>
<div class="navbar navbar-static-top navbar-dark bg-inverse">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
&#9776;
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
<a href="#" class="navbar-brand">Album</a>
</div>
</div>
Expand Down
7 changes: 1 addition & 6 deletions docs/examples/dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,7 @@
<body>

<nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Project name</a>
<div id="navbar">
<nav class="nav navbar-nav pull-xs-left">
Expand Down
4 changes: 1 addition & 3 deletions docs/examples/navbar-top-fixed/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,7 @@ <h3>Collapsed content</h3>
</div>
</div>
<div class="navbar navbar-light bg-faded navbar-static-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
&#9776;
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
</div>
</div>

Expand Down
4 changes: 1 addition & 3 deletions docs/examples/navbar-top/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,7 @@ <h3>Collapsed content</h3>
</div>
</div>
<div class="navbar navbar-light bg-faded navbar-static-top m-b-1">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
&#9776;
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
</div>

<div class="container">
Expand Down
4 changes: 1 addition & 3 deletions docs/examples/navbar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@

<div class="container">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
&#9776;
</button>
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
Expand Down
4 changes: 1 addition & 3 deletions docs/examples/sticky-footer-navbar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ <h3>Collapsed content</h3>
</div>
<nav class="navbar navbar-light navbar-static-top bg-faded">
<div class="container">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
&#9776;
</button>
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-expanded="false" aria-controls="exCollapsingNavbar2" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Sticky footer</a>
<ul class="nav navbar-nav">
Expand Down
9 changes: 9 additions & 0 deletions scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,15 @@
@include hover-focus {
text-decoration: none;
}

// Hamburger menu icon
&::before {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A comment explaining what this is for (e.g. // Hamburger menu icon) would be good.

font-weight: 500;
content: "\2261"; // IDENTICAL TO (U+2261)
// wider overall support (see http://unicode.johnholtripley.co.uk/2261/)
// compared to previously used TRIGRAM FOR HEAVEN (U+2630)
}

}

// scss-lint:disable ImportantRule
Expand Down