Responsive navbar functionality, on mouse out close, on click close

The site has a working responsive navbar which uses the check-box hack and smooth scrolling.
To complete the functionality the navbar needs:
1- On mouse out the navbar should close
2- On click the navbar should close and scroll to target

The navbar works partially. On click it scrolls to the target ID and closes. However, the navbar does not work after the initial click. To enable the navbar requires a manual page refresh.

The navbar does not close on mouse out. I have tested the onmouseout event using the alert() method. Every time the mouse leaves the ul li area, the alert window pops up. Moving from li to li pops multiple alerts. The idea is that when the mouse leaves the ul area the navbar closes.

Can someone look at this test link and advice how to approach the on click close nav bar and on mouse out close navbar functionality. This functionality is critical when the viewport has max with of 980px.

Test link:
http://photoshopace.com/transfer/PS/translucent-navbar/partials/template-header1.htm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.