Unordered List - List Item Position

At the moment I have a website with 5 pages and the main navigation is being displayed using an unordered list. What I'm trying to achieve is for the 'active' page to be displayed

Solution 1:

Here is a pure CSS way to do it using Flexbox ordering.

ul {
  …
  display: flex;
  flex-direction: column;
}

li[class=active] {
  order: -1;
  …
}

Demo: http://codepen.io/antibland/pen/ZWjdqL

Support: IE10+, Firefox, Chrome

Solution 2:

Jsfiddle link

jQuery:

$(function(){
    $("li").on("click", function(){
        $('ul').prepend($(this))
    }) 
})

HTML

<ul>
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
    <li>Blog</li>
</ul>

Solution 3:

You could do something like this :

$('.large-nav li').each(function() { 
    if($(this).find('a').attr('href') == location)
    {
        $('.large-nav ul').prepend($(this))
    }
})