Skip to content

Instantly share code, notes, and snippets.

What would you like to do?

Here is a solution, inspired of DenisSheremet's comment and slightly modified.

enter image description here

document.getElementById('nav').addEventListener('click', function() { 
    document.getElementById('hello').className = ''; 
#nav { display: block; position: fixed; top: 0; left: 0; width: 35px; height: 35px; background-color: #ff1972; cursor: pointer; }
.hamburger-body { height: 3px; margin: 16px 6px; background: white; position: relative; }
.hamburger-body:before, .hamburger-body:after { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: white; }
.hamburger-body:before { transform: translateY(-8px); }
.hamburger-body:after { transform: translateY(8px); }
.hidden { display: none; }
#hello { margin-top: 100px; }
<div id="nav"><div class="hamburger-body"></div></div>

<div id="hello" class="hidden">Hello!</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment