Move Portfolio Pagination to Above Content

Site URL: https://porpoise-octopus-h98m.squarespace.com/

Hi! I am trying to move the pagination from the bottom of the portfolio page to the top above content in a column. I followed instructions from another question on how to move to the top, but now I'd like to adjust even further. 

It looks like you figured it out? Can you share solution for other members?

@tuanphan Whoops, I ended up commenting on another thread, but I still have a question. I was able to update to be at the top of the page, but I would like to adjust to have it be within the content, in the column. Where the blue box is in this screenshot:

On 2/22/2022 at 8:43 PM, kvanlent said:

@tuanphan Whoops, I ended up commenting on another thread, but I still have a question. I was able to update to be at the top of the page, but I would like to adjust to have it be within the content, in the column. Where the blue box is in this screenshot:

What is site access password?

Could you share how you were able to move pagination from the bottom to the top of content? I am trying to do this but cannot find instructions anywhere. Thank you.

On 4/27/2022 at 8:54 AM, BBmt said:

Could you share how you were able to move pagination from the bottom to the top of content? I am trying to do this but cannot find instructions anywhere. Thank you.

Depend your site. Can you share site url?

Or add this code to Portfolio Page Header

<style>
.view-item main#page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding-top: 100px;
}
  section.item-pagination.item-pagination--prev-next {
    padding-top: 0;
    padding-bottom: 5px;
}
  .view-item #page section:first-child {
    padding-top: 10px !important;
}
</style>

If you use Personal Plan, please share link to portfolio page, we can give new code easier

On 4/30/2022 at 11:06 AM, tuanphan said:

Depend your site. Can you share site url?

Or add this code to Portfolio Page Header

<style>
.view-item main#page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding-top: 100px;
}
  section.item-pagination.item-pagination--prev-next {
    padding-top: 0;
    padding-bottom: 5px;
}
  .view-item #page section:first-child {
    padding-top: 10px !important;
}
</style>

If you use Personal Plan, please share link to portfolio page, we can give new code easier

Is there a way to move the pagination to be after the first section?

I currently use the first section as a title with an image background and I would like the pagination to be between the title and the rest of the content.

Thanks!

3 hours ago, liorshva said:

Is there a way to move the pagination to be after the first section?

I currently use the first section as a title with an image background and I would like the pagination to be between the title and the rest of the content.

Thanks!

 

Can you share page url? Do you use Personal or Business Plan? We can give the better solution

On 8/30/2022 at 5:29 PM, tuanphan said:

Can you share page url? Do you use Personal or Business Plan? We can give the better solution

liorshvanew.squarespace.com/recommendations/london/asian

Password: Migdal

It is a business account. Already using loads of custom CSS and a bit of javascript.

Having the pagination buttons as the 2nd section on the page would make the most sense. I tried your code from above and it moved the pagination above the header, which doesn't make any sense.

Any help is appreciated!

Thanks!

You want to move pagination to this position or?

or this?

The second option, sort of.

Below the title section but above the content section. Some of the project pages have text boxes that go quite close to the edge of the screen so the pagination would need to push the 2nd section down a bit to prevent overlapping.

Thanks

23 hours ago, liorshva said:

The second option, sort of.

Below the title section but above the content section. Some of the project pages have text boxes that go quite close to the edge of the screen so the pagination would need to push the 2nd section down a bit to prevent overlapping.

Thanks

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('section#itemPagination').insertAfter('body.collection-630c1cdb9447cc046a9f627b article section:first-child');
	});
</script>

That worked great, thanks.

Just checking, is there a way to apply this to all portolio collections at once? Or do I need to repeat this code with a unique collection ID for each portfolio?

On 9/9/2022 at 5:23 PM, liorshva said:

That worked great, thanks.

Just checking, is there a way to apply this to all portolio collections at once? Or do I need to repeat this code with a unique collection ID for each portfolio?

No way. You can add this to all Portfolio Page Header, so no need to find id.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('section#itemPagination').insertAfter('body.view-item article section:first-child');
	});
</script>

Perfect. That is EXACTLY what I was looking for.

Hi @tuanphan

I also have the same problem.
I would like to move the 'portfolio pagination' to the height of the title as in the attached jpg.
I would like this setting to be applied to :
FURNITURE
OBJECTS
PUBLIC 
RESIDENTIAL

https://grasshopper-bagpipe-xnbp.squarespace.com

Thank you very much!

On 3/22/2023 at 12:26 AM, abian said:

Hi @tuanphan

I also have the same problem.
I would like to move the 'portfolio pagination' to the height of the title as in the attached jpg.
I would like this setting to be applied to :
FURNITURE
OBJECTS
PUBLIC 
RESIDENTIAL

https://grasshopper-bagpipe-xnbp.squarespace.com

 

Thank you very much!

Have you tried above code yet? You can add it to 4 Pages Header