Previous and Next Button Not Working

[astersblog]

Hello,

The previous and next button on my site is not working. It has never worked for the past 4ish months and I am only getting around to fixing it. Is there a setting it should be on to make it clickable? It does show a previous/next button but you can only hover over it, not click on it.

Thanks.

[tristup]

Hi @astersblog,

I have checked your site and found the Next and Previous arrow is working fine. If that is not the case and you are trying to point out something else, please provide any screenshot marked with the issue or any video that helps us to recognize the problem.

Thanks

[astersblog]

Hello,

I am referring to the arrows that allow a user to scroll between posts on laptop. These arrows don’t show on mobile.

[prakash_s]

Hello @astersblog,

I checked your website it seems that you have added custom CSS code to style the post title and content because of that the pagination arrow is not clickable and in mobile, you have hidden the pagination arrows through custom CSS code. The CSS code is rendering from the cached style. I would suggest you purge all the cache and remove your custom CSS code then check it again.

Or

you can use this code to increase the z-index of the pagination arrow so that it can be clickable.
Use this code under X/Pro -->Theme option —>CSS.

.single-post .x-nav-articles{
position: relative;
z-index: 9;
}

For mobile

@media(max-width:766.98px){
.single-post .x-nav-articles{
display: block !important;
}
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[astersblog]

Hi,

The CSS you suggested worked to fix the issue on desktop, I am not sure about mobile as nothing new has been added there. Thank you!

I don’t recall adding that specific CSS to adjust the post/style or to hide the pagination arrows in mobile. I can’t see on the image what the CSS says, could you copy and paste it via text so I can see it and remove it to see if that is the problem? By removing it, will it alter the layout of my website? Or is it just safer to use the CSS you provided?

[tristup]

Hi @astersblog,

The previously written code which was the cause behind your issue is overridden by the code suggested by my colleague. Please find the code below.

.single-post .x-nav-articles 
{
    display: none;
}

Please remember that we don’t offer any support or investigate any issues related to custom codes.

Thanks