Infinite scroll doesn't work

zhengziying · Member · April 3, 2015 at 7:50 am
Copy link

Add topic to favorites
In Setting->Reading, the “To infinity and beyond” row shows “We’ve changed this option to a click-to-scroll version for you since you have footer widgets in Appearance → Widgets, or your theme uses click-to-scroll as the default behavior.“

But I don’t have any footer widgets in “Appearance → Widgets”. I only see “Sidebar” there.

To make it works, there is no “More Posts” button on the category page (e.g. http://zhengziying.com/category/life/). Although there is a “More Posts” button at the bottom of the home page (http://zhengziying.com/).

I’m Ok with either way:
1. I can enable infinite scroll on home page and category pages, or
2. There is a “More Posts” button on both Home page and category pages.

Can you help me figure it out?

Thanks!
-eric

The blog I need help with is: (visible only to logged in users)
mmcalister · Theme Author · April 4, 2015 at 2:10 am
Copy link
Hi Eric,

It looks like maybe there is some Custom CSS hiding the navs. This is what I see in the page:
```
.nav-links {
  display: none;
}
```
Try going to Appearance -> Customize -> CSS and removing this CSS if it’s in there.
zhengziying · Member · April 4, 2015 at 4:02 am
Copy link
Thanks mmcalister for looking into it promptly!

To report what I have tried and seen:

1. I removed the .nav-links section from the custom CSS. It doesn’t seem to change: still no “More Posts” button in category page, nor infinite scroll.

2. I found that the “Most Posts” button is in a different div: <div id=”infinite-handle”>, rather than <div class=”nav-links”>. On home page, there is both <div class=”nav-links”> and <div id=”infinite-handle”>. But there is no <div id=”infinite-handle”> on category page. I guess that’s why removing .nav-links from custom CSS didn’t change anything.

3. I found that in the category page (example), the entire <nav class=”navigation paging-navigation” role=”navigation”> section has “display: none”:
```
media="all"
.infinite-scroll .paging-navigation, .infinite-scroll.neverending .site-footer {
  display: block;
}
```
I guess that’s why regardless whether I put “display: none” on .nav-links in custom CSS or not, there is never a “Older Posts” button on category page.
In F12, I changed it to “display: block” and now can see the “Older Posts” and “Newer Posts” button at the bottom of category page.

Any recommendation what I should do?

To clarify what I want: I want to have infinite scroll, but I’m also OK with either way, the old-school navigation (“Older Posts” and “Newer Posts” buttons).
zhengziying · Member · April 4, 2015 at 4:13 am
Copy link
Btw, I tried to put the following in custom CSS:
```
.infinite-scroll .paging-navigation,
.infinite-scroll.neverending .site-footer {
  display: block !important;
}

#infinite-handle {
	display: none !important;
}
```
That will suppress the “More Posts” button (#infinite-handle) on the home page, and show “Older Posts” and “Newer Posts” on home, category and monthly archive pages.

I guess that will be my last resort — it will just give me the old school navigation across the board.

Still looking for a way to have infinite scroll on home, category and monthly archive pages.
mmcalister · Theme Author · April 7, 2015 at 3:48 am
Copy link
Hi there,

We just released an update for this bug and it should be available on your site shortly!

No items found.