Activating the 'Active' Class Based On The Current URL (Page2,Page3 Etc)

[WillNaylor1994]

Hi All!

I have been developing my blog using this theme and have added a fair few amendments to make it work for me. These include:

• Making the pagination sort ByDate across all pages.

• Adding jQuery to assign the 'Active' class in the nav bar to whichever page you're on.

This means when you click on an option in the nav bar (or just click 'next' or 'previous') the nav bar will have the correct option highlighted for which page you're on.

It was just this line of jQuery to add in 'jquery.min.js'

$(document).ready(function() {var pathname = window.location.pathname;$('.links > li > a[href="'+pathname+'"]').parent().addClass('active');})

I thought i should add this here as this took me a while to figure out and could save people a lot of time!

Working example > www.billiewillytravel.co.uk

[RuifMaxx]

thank you a lot

[schmidde97]

Does this still work? Could not get that to work. I added the above code to 'jquery.min.js' in the theme folder.

[WillNaylor1994]

Does this still work? Could not get that to work. I added the above code to 'jquery.min.js' in the theme folder.

Hi! This is still working for my site, as you can see from the example website above.

Depending on which page you're on (page1,page2 etc) the 'active' class is assinged to the correct nav bar item which makes the colours reverse.

I added the code above at the end of the 'jquery.min.js' file and it worked for me.

Maybe just double check that your class for the nav bar is also called 'active'. Perhaps this has been changed with future updates, i am not too sure.

[schmidde97]

thanks!

one other question: how did you get the posts organized on the different pages? I tried with _index.md & taxonomy, but that gives me only a blank page...