5

I have this as my menu bar for the site when viewed on tablet:

Header menu

The menu icon on the right shows other options when clicked. The code is 

<div id="menu">
  <a id="metaMenu" href="#">&#9776;</a>
</div>

But I saw on Twitter that the entity (or it may have been the corresponding Unicode characters) is not supported in some Android phones. How can I modify my HTML to have a fallback?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
JGallardo
  • 11,074
  • 10
  • 82
  • 96
  • 1
    Why you don't use a image? – rkawano Oct 09 '13 at 21:13
  • 1
    Maybe even an = sign since that will render ever so lovely all the time. – Josh Powell Oct 09 '13 at 21:19
  • @dymmeh: every image on the page is a server request and has a negative influence for performance - it's the reason why lots of people use a single sprite.png where stuff every icon used among the website – Marco Panichi May 21 '15 at 16:42
  • Using ≡ instead worked for me, as answered here: https://stackoverflow.com/questions/32070745/unicode-9776-hamburger-not-displaying-in-android-chrome – Mark Dec 12 '17 at 19:53

4 Answers4

10

i use &equiv; as of my knowledge this works most of the time.

Firewizz
  • 773
  • 5
  • 17
  • 1
    I love this simplicity of this answer. Being a mathematical operator I would be surprised If this is not supported universally. – garydavenport73 Jan 30 '22 at 17:07
8

Image is a wrong way to go about this - as is an entity, in my opinion. As this one is not well supported at all. No Android, renders weird on Windows Chrome, Internet Explorer, etc.

Go the CSS3 route. This is supported by every major browser - and all modern mobile devices.

jsFiddle here: http://jsfiddle.net/328k7/

Use CSS3 as below. Edit where you see fit...

div {
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 14px;
    top: 0;
    height: 0;
    -webkit-box-shadow: 1px 10px 1px 1px #69737d,1px 16px 1px 1px     #69737d,1px 22px 1px 1px #69737d;
    box-shadow: 0 10px 0 1px #69737d,0 16px 0 1px #69737d,0 22px 0 1px #69737d;
}
Mike Barwick
  • 6,288
  • 6
  • 51
  • 76
  • Correct me if I'm wrong, but [according to caniuse](http://caniuse.com/#search=box%20shadow), multiple shadows are not supported in safari and the android default browser, making this not the greatest solution for mobile – markasoftware Mar 12 '16 at 04:04
  • @Markasoftware way back when maybe...if you're running a really outdated Safari. Even mobile, unless you're using a brick - should work. I believe I took this code from Zurb Foundation framework. – Mike Barwick Mar 12 '16 at 04:29
  • Oh, nevermind. I read the tables incorrectly at caniuse. Sorry! – markasoftware Mar 12 '16 at 04:37
4

The solution used by Twitter Bootstrap is using spans to construct the Hamburger:

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

The corresponding CSS is:

.navbar-toggle {
   position: relative;
   float: right;
   padding: 9px 10px;
   margin-top: 8px;
   margin-right: 15px;
   margin-bottom: 8px;
   background-color: #cccccc;
   border: 1px solid transparent;
   border-radius: 4px;
}

.navbar-toggle .icon-bar {
   display: block;
   width: 22px;
   height: 2px;
   background-color:#000000;
   border-radius: 1px;
}

.navbar-toggle .icon-bar+.icon-bar {
   margin-top: 4px;
}
Isaque Bressy
  • 61
  • 1
  • 9
  • As of BS4 you'll want to use a single `` and the [`navbar-toggler-icon`](https://getbootstrap.com/docs/4.3/components/navbar/#external-content) class, instead. – McGuireV10 Aug 29 '19 at 11:42
0

Here is how I ended up doing it, with an inline SVG element defined in the CSS:

#menu_button {
    margin-top: 2vmin;
    margin-left: 2vmin;
    width: 8vmin;
    height: 8vmin;
    background-size: 100%;
    /* inline SVG element! */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 120 80" width="40" height="40" version="1.0" xmlns="http://www.w3.org/2000/svg"><rect x="15" width="90" height="15" rx="10"></rect><rect x="15" y="30" width="90" height="15" rx="10"></rect><rect x="15" y="60" width="90" height="15" rx="10"></rect></svg>');
}

Note that the string in url() must be all on one line -- no newline characters. Then pop in your HTML:

<button id="menu_button" type="button" onclick="show_menu()">
</button>

With this method you can make a hamburger image styled exactly as you want it, but without having to load a separate image file from your server.

monist
  • 66
  • 5