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()">☰</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>
Copy code
