Customize Index Navigation in York Template

Site URL: http://www.chirp-design.com

I am using the York Template for a portfolio site. When you click on an index thumbnail to open up a project page and scroll to the bottom, the index navigation is setup to read "NEXT" (which takes the user to the next project in the index).

I love this feature, but would also like to include a "PREVIOUS" or "BACK" option as well so that users can navigate forward and backward through the index of projects. My site is not live yet, but here is a screenshot of the index navigation as it currently appears (just above the page footer).

Does anyone know how to incorporate custom code to the index navigation so that it can move backward as well?

Whats the password?

I have the same question, wanting to add "Previous" to the already existing "Next"  but ALSO... I'm wanted to simply justify both to the left...

I think this could be solved with some Custom CSS, but I don't know much code...

Can anyone help?

https://gregoryherman.com/

Hey @GregHerman which page are you seeing the "Next" part, took a look at the homepage but wasn't seeing it anywhere

Sorry, it's within the pages... Example below ...

Here is the Centered "NEXT" button

I want to justify it left, like everything else, and if possible, add the previous button...

Hi, @RyanDejaegher Thanks for responding...

Hopefully what I posted above gives you a more clear look...

I was trying to figure it out myself, am I getting close?

.index-next-link div {

    text-align:left;

}

.index-next {
    text-align: left !important;
}

IT WORKED!

Thank you so much @rwp

I'll figure out adding the previous button later, but for now, this is a huge win...

Thank again!

@GregHerman I am grasping at straws here with the prev button.......but......  give this a try:

Here's some CSS that we need to add:

nav.index-next {
    display: inline-flex !important;
    margin-top: auto !important;
}

.index-next .link-next-up {
    padding-right: 25px;
}

And some jQuery

$(document).ready(function() {
  var NextLink = $('a.active-link')
  var PrevLink = $(NextLink).prev('a')
  var PrevSpan = $(PrevLink).children('span').first()
  $(PrevLink).attr('class', 'index-next-link page-collection index-page-transition-link link-next-up');
  $(PrevSpan).attr('data-next-link', 'PREV');
})

@AbbyGoodson, that code that I worked up was based around @GregHermans page. I do not know if it will work at all for yours.

I would need the password to see if it would work, or if it could be made to work.

@rwp Thanks for the effort, but it's not working..

I added the 1st part to the css custom section and the next part to the head of the code injection section under advanced. I assumed that is where jQuery should live.. I saw a lot of text at the top of the pages, if that is any clue?

Wish I could be of more help, but I really appreciate you and your efforts.

Thanks again!!!

1 hour ago, GregHerman said:

@rwp Thanks for the effort, but it's not working..

I added the 1st part to the css custom section and the next part to the head of the code injection section under advanced. I assumed that is where jQuery should live.. I saw a lot of text at the top of the pages, if that is any clue?

Wish I could be of more help, but I really appreciate you and your efforts.

Thanks again!!!

You need to add the jQuery script, check my signature for instructions.

@rwp  THANK yOU AGAIN!!!  you are too kind and I sooo appreciate your efforts..

Unfortunately I'm still struggling with getting this to work.

I added the Jquery code : 

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

to the code injection .. 

And added <Script></script> tags to your jquery code. 

I've got your css in the custom css section and both the jquery codes in the advanced site wide injection.

Wish I could say it worked....Again, Thank you the effort... you rock.

window.Squarespace.onInitialize(Y, function () {
  var NextLink = $('a.active-link');
  var PrevLink = $(NextLink).prev('a');
  var PrevSpan = $(PrevLink).children('span').first();
  $(PrevLink).attr('class', 'index-next-link page-collection index-page-transition-link link-next-up');
  $(PrevSpan).attr('data-next-link', 'PREV');
});

Try replacing the block of code with this one. The ajax loading is causing the issue.

BOOM!

That worked! DUDE Thank you so much.. I cant thank you enough for our efforts.. 

you are a coding badass, mad respect.  I owe u one. 

Thanks again Ryan

Happy to help!

@AbbyGoodson I just check really quickly, it looks the the code above will work for you too, let me know if it doesn't work right.

See my signature for how to use this code.

 Here's some CSS that we need to add:

nav.index-next {
    display: inline-flex !important;
    margin-top: auto !important;
}

.index-next .link-next-up {
    padding-right: 25px;
}

And some jQuery

window.Squarespace.onInitialize(Y, function () {
  var NextLink = $('a.active-link');
  var PrevLink = $(NextLink).prev('a');
  var PrevSpan = $(PrevLink).children('span').first();
  $(PrevLink).attr('class', 'index-next-link page-collection index-page-transition-link link-next-up');
  $(PrevSpan).attr('data-next-link', 'PREV');
});

Thanks @rwp!

It looks like this code worked, just needs a little design finessing. Are any of the below options possible?

• Can "PREV" text say "BACK" instead?
• Can it be centered instead of left aligned?
• Can some padding be added above the "PREV NEXT" text? 

Change PREV in the last line to BACK. The css stuff I can do when I get home.

Excellent, thanks again for your help @rwp!

@AbbyGoodson

Delete the CSS that you got from above

Replace it with this:

nav.index-next {
    display: inline-flex !important;
}

.index-next .link-next-up {
    margin: auto;
}

This is looking great! My last question: can the BACK and NEXT text be a little closer together? Maybe 25px apart? See attached screenshot:

I swapped the "50%" to "35%" to make it a little closer, and it worked perfectly.

@rwp I can't thank you enough for your help. It's much appreciated!

Figured it out...... Change the code to this

nav.index-next {
    display: inline-flex !important;
	width: max-content;
}

.index-next .link-next-up {
    margin: auto;
    padding-left: 20px;
    padding-right: 20px;
}

@rwp yes—perfect!