Javascript – Move active link to top of navigation if window-width <= 800px

I have a responsive navigation which is fixed at the top and goes from horizontal to vertical if screensize is <=800 px wide.

Now I’m trying to move the currently active link to the top of the navigation if the screen size is <=800 px wide, but I can’t seem to find a way.

I tried Javascript but it won’t keep the currently active link at the top since the page refreshes or changes when a link is clicked.

I tried to put the loop in an if-statement but that doesn’t work, so I removed the if-statement.

I would really appreciate it if someone could help me solve this problem.

Here’s the Javascript:

/*------------------------move active link to top------------------------*/
function moveLink(){
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var list = document.getElementById('nav').childNodes;
for (var i = 0; i < list.length; i++) {
    list[i].addEventListener('click',function() 
    {nav.insertBefore(this, nav.childNodes[0])});
}
}

Here’s the navigation html:

<nav>
<ul id="nav" class="topNav">
    <li><a onclick="moveLink()" href="/">BEATS</a></li>
    <li><a onclick="moveLink()" href="sounds.html">SOUNDS</a></li>
    <li><a onclick="moveLink()" href="services.html">SERVICES</a></li>
    <li><a onclick="moveLink()" class="active" href="licenses.html">LICENSES / FAQ</a></li>
    <li><a onclick="moveLink()" href="downloads.html">DOWNLOADS</a></li>
    <li><a onclick="moveLink()" href="contact.php">CONTACT</a></li>
    <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">
    <img alt="open menu" src="graphics/menu.png" style="height: 30px; width: 30px;"></a>
    </li>
</ul>

thanks in advance,
Ken


Source: stackoverflow-javascript