Responsive header navigation

I'm looking for the proper way to have a responsive navigation menu. I gotten as far as I can but now I'm running in to issues. I'm not really sure where to have the sidebar div. The full implementation is at http://ift.tt/2aPm4Ng

<div id="header-container">
            <div id="header-logo">
                <div id="logo-container">
                    <a href="/"><img src="/resources/images/logo.png" alt="Logo"></a>
                </div>
            </div>

            <div id="header-nav">
                <div id="nav-container">
                    <ul class="nav">
                        <li><a href="/about">About</a></li>
                        <li><a href="/resume">R&eacutesum&eacute</a></li>
                        <li><a href="/connect">Connect</a></li>
                        <li><a href="/contact">Contact</a></li>
                        <li class="icon"> <a href="javascript:void(0);" onclick="openNav()">&#9776;</a> </li>
                    </ul>
                </div>
            </div>
        </div>

I'm essentially trying to emulate the style found at http://www.kochind.com/