I think everyone knows such a popular plugin as wp-pagenavi, who does not know this is a navigation plugin. Unfortunately, the plugin developers are in no hurry to make it adaptive., Responsive websites are playing a very important role these days., especially for google search engine. Therefore, today I decided to open this question and tell you how you can quickly turn non-responsive navigation into one that will display perfectly on mobile devices..

Like all genius, this lesson will be as simple and understandable as possible even for beginner web developers..

Responsive navigation wp-pagenavi for a website for mobile devices

Let's see how the plugin navigation looks on mobile without changing anything.

As you can see from the picture everything is floating, because it simply does not fit on the screen. Let's fix this and leave only the important buttons.

If you already have the wp-pagenavi plugin installed, then all you have to do is open the stylesheet which is in the path /wp-content/themes/-name of your theme-/style.css (in premium themes, the path to styles may be slightly different).

To open file and add styles:

After simple manipulations, extra buttons for mobile devices will be hidden.

If this is not enough for your design, then you can also remove the first and last button. To do this, you need to modify the style code a little.:

Here's what happened:

If something didn't work out, ask in the comments. I think this can be finished, successful development of convenient and adaptive sites.