How to show burger icon "☰" on mobile phones?

Question

I have a custom navigation menu using pure html/css (not bootstrap) , There is a burger icon that should appear on mobile phones :

<label for="toggle">&#9776;</label>

It appears on computer when I minimize the browser width , but not on mobile phones , I think the problem is "☰" , Is there is a unicode for it or any alternatives that would work o mobile phones ?

Bear in mind that `&9776;` is an entity for a unicode character with a [specific meaning](http://www.codetable.net/decimal/9776); that meaning is not "hamburger menu". :) There are a number of other similar characters, such as [`≡`](https://en.wikipedia.org/wiki/Triple_bar) which is more commonly used for this purpose and more likely to work as it's a more commonly supported character. Still not semantically correct for the purpose of a burger menu, but if you must use a character, use this one). — Spudley, Oct 21 '17 at 16:50
Possible duplicate of [What is a fallback for the "hamburger icon" or HTML entity ☰?](https://stackoverflow.com/questions/19282760/what-is-a-fallback-for-the-hamburger-icon-or-html-entity-9776) — Remy Lebeau, Oct 24 '17 at 23:53

score 0 · Answer 1 · answered Oct 21 '17 at 15:59

0

Try using:

<label for="toggle">&#8801;</label>

this should hopefully fix your issue on mobile! Hope it helps.

answered Oct 21 '17 at 15:59

jstoobz

384
1
6

score 0 · Answer 2 · answered Oct 21 '17 at 16:02

Try using css pseudo class like :after and :before. it works all across browser and device.

.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>

score 0 · Answer 3 · answered Oct 21 '17 at 16:54

This is the menu that i'm using, it is pure CSS/HTML and makes a hamburger icon for phones:

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/

How to show burger icon "☰" on mobile phones?

3 Answers3