How do you create a hamburger menu for mobile with W3.CSS?

Hide the full menu on phones with w3-hide-small, then show a hamburger button that toggles the w3-hide class on a dropdown to reveal those items.

<div class="w3-bar w3-blue">
    <a href="#" class="w3-bar-item w3-button">News</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small">Login</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small">About</a>
    <button class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium"
            onclick="document.getElementById('sub').classList.toggle('w3-hide')">
        &#9776;
    </button>
</div>

<div id="sub" class="w3-bar-block w3-blue w3-hide">
    <a href="#" class="w3-bar-item w3-button">Login</a>
    <a href="#" class="w3-bar-item w3-button">About</a>
</div>

Key classes:

The pattern:

1. Hide menu items on small screens
2. Show hamburger button (☰) only on small screens
3. Toggle w3-hide class on click to show/hide dropdown