Graham bemethavinci
Here is a w3css _header code for a header that collapses to a 'hamburger' menu on mobiles
demo http://cssw3s.xtgem.com/
There is some js but w3css puts it in the actual code
I have also added a routine to mark the 'active' link
Note links are set in two places one for pc and one for mobile

<div class="w3-bar w3-red mark-active"> <a href="/" class="w3-bar-item w3-button">Home</a> <a href="/blog" class="w3-bar-item w3-button w3-hide-small">Blog</a> <a href="/forum" class="w3-bar-item w3-button w3-hide-small">Forum</a> <a href="/about" class="w3-bar-item w3-button w3-hide-small">about</a> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="showNav()">&#9776;</a> </div> <div id="mobile-nav" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium mark-active"> <a href="/blog" class="w3-bar-item w3-button">Blog</a> <a href="/forum" class="w3-bar-item w3-button">Forum</a> <a href="/about" class="w3-bar-item w3-button">About</a> </div> <script type="text/javascript" > function showNav() { var x = document.getElementById("mobile-nav"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } if ( document.getElementsByClassName ) { window.mark_active = function () { var items = document.getElementsByClassName('mark-active'); if ( items != undefined && items != null && items [0] != undefined ) { for (var h = 0; h < items.length; h++) { var item = items[h].childNodes; var loc = decodeURI ( document.location.pathname ).replace ( ' ', '+' ).replace ( /\/__xt.+/, '' ); for (var i = 0; i < item.length; i++) { if ( item [ i ] && item [ i ].getAttribute && item [ i ].getAttribute('href') == loc ) { item[i].className += ' w3-opacity'; break; }; } } } }; window.mark_active (); } </script>