私は、携帯電話に表示されますバーガーのアイコンがあり、（ブートストラップではない）純粋なHTML/CSSを使用して、カスタムナビゲーションメニューを持っている：バーガーアイコン "☰"を携帯電話に表示するには？
<label for="toggle">☰</label>
それは私は、ブラウザの幅を最小化したとき、コンピュータ上で表示されますが、ではありません携帯電話では、私は問題が"☰"だと思う、それとも携帯電話を動作させる任意の代替のためのユニコードですか？
使用してみてください：
<label for="toggle">≡</label>
これがうまくいけば、モバイルであなたの問題を解決する必要があります！それが役に立てば幸い。
:afterと:beforeのようなCSS疑似クラスを試してみてください。ブラウザとデバイスのすべてで動作します。
.header {
background-color: #333;
width: 100%;
}
.header nav {
width: 100%;
margin: 0 auto;
position: sticky;
height: 100vh;
top: 0px;
}
.header nav .btn {
outline: none;
border: none;
display: block;
cursor: pointer;
background-color: #fff;
width: 2.5rem;
height: 2.5rem;
margin: 16px;
}
.header nav .btn span {
background-color: #FD5B4E;
width: 95%;
height: 0.1875rem;
position: relative;
display: block;
margin: auto;
top: 50%;
}
.header nav .btn span:before {
content: '';
background-color: #FD5B4E;
width: 100%;
height: 0.1875rem;
display: block;
top: -0.625rem;
position: absolute;
}
.header nav .btn span:after {
content: '';
background-color: #FD5B4E;
width: 100%;
height: 0.1875rem;
display: block;
position: absolute;
top: 0.625rem;
}<body>
<header id="header" class="header sidbar">
<nav>
<button class="btn"><span></span></button>
</nav>
</header>
<!-- /header -->
</body>これは私が使用している、それは純粋なCSS/HTMLで、電話のハンバーガーのアイコンを作るメニューです：
HTML：
<header class="navigation">
<a href="" class="logo"><img border="0" alt="Logo" src="images/logo.png" width="33" height="36.4">Logo</a>
<input class="button" type="checkbox" id="button" />
<label class="icon" for="button"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work">Tutorials</a></li>
<li><a href="#about">Creations</a></li>
<li><a href="#careers">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
CSS：
.menu {
position:relative;
}
.navigation {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
}
.navigation ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.navigation li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
color:#000000;
}
.navigation li a:hover,
.navigation .button:hover {
background-color: #f4f4f4;
}
.navigation .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
color:#000000;
}
.navigation .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
font-family: 'Open Sans', sans-serif;
text-transform:uppercase;
}
.navigation .icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.navigation .icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.navigation .icon .navicon:before,
.navigation .icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.navigation .icon .navicon:before {
top: 5px;
}
.navigation .icon .navicon:after {
top: -5px;
}
.navigation .button {
display: none;
}
.navigation .button:checked ~ .menu {
max-height: 240px;
}
.navigation .button:checked ~ .icon .navicon {
background: transparent;
}
.navigation .button:checked ~ .icon .navicon:before {
transform: rotate(-45deg);
}
.navigation .button:checked ~ .icon .navicon:after {
transform: rotate(45deg);
}
.navigation .button:checked ~ .icon:not(.steps) .navicon:before,
.navigation .button:checked ~ .icon:not(.steps) .navicon:after {
top: 0;
}
@media (min-width: 48em) {
.navigation li {
float: left;
}
.navigation li a {
padding: 20px 30px;
}
.navigation .menu {
clear: none;
float: right;
max-height: none;
}
.navigation .icon {
display: none;
}
}
jsfiddle：https://jsfiddle.net/96a2pudt/2/
ベア心の中で '&9776;は' [特定の意味]（http://www.codetable.net/decimal/9776）のUnicode文字のエンティティであること。その意味は「ハンバーガーメニュー」ではない。 :) ['≡ ']（https://en.wikipedia.org/wiki/Triple_bar）のような他の同様の文字がいくつかありますが、これはより一般的にこの目的に使用されており、一般的にサポートされている文字。バーガーメニューの目的にはまだ意味的には正しくありませんが、キャラクターを使用する必要がある場合は、これを使用してください）。 – Spudley
「ハンバーガーアイコン」またはHTMLエンティティ☰のフォールバックとは何ですか？（https://stackoverflow.com/questions/19282760/what-is-a-fallback-for-the-hamburger-icon- or-html-entity-9776） –