Sticky menu for Play0AD.com

[Davide]

I tend to navigate easier and faster with so called "sticky navigation menu", and I usually recommends it to most websites. To achieve this at Play0AD.com, check /wp-content/themes/nova/style.css at line 481 and change:

#navbar {
	background: url(images/menu-bg.png) center center;
	border-bottom: 1px solid #E7BF47;
	border-top: 1px solid #000;
	font-weight: 700;
	height: 30px;
	margin: 0 auto;
	width: 1000px;
}

to

#navbar {
background: url(images/menu-bg.png) center center;
border-bottom: 1px solid #E7BF47;
border-top: 1px solid #000;
font-weight: 700;
height: 30px;
margin: 0 auto;
width: 1000px;
position: sticky;
top: 0;
z-index: 100;
}

I set z-index to 100, but it may needs further tests to check if there are objects on the site with higher values.

[Delusian]

Hi,

I'm new here but i wouldn't take "position:sticky" for that purpose. As far as i know it's not supported by each browser

i would do it like:

jQuery(document).ready(function () {
    var menu = document.querySelector('.cssmenu')
    var menuPosition = menu.getBoundingClientRect().top;
    
	window.onscroll = function() {
        $(".cssmenu").width($(".row-col-mid").width())
		if (getScrollOffsets().y >= menuPosition) {
            menu.style.position = 'fixed';
            menu.style.top = '0px';
        } else {
            menu.style.position = 'static';
            menu.style.top = '';
        }
    }
});