Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Hide the Pagination Navigation Using CSS

Have you ever wanted to hide the pagination navigation for a gallery with Envira Gallery’s Pagination Addon? Perhaps you only want to show 1 image from the gallery on the page. With Envira and a little CSS you can easily limit the number of images shown. This tutorial will walk you through the steps you need to do exactly that!

This tutorial is a little more technical then the other docs and will require a basic level of CSS.

First you’ll need to either create a new gallery or edit an existing gallery. If you need any help creating your first gallery, please review our documentation here.

Next, you’ll need to configure your pagination settings from the Pagination tab of the gallery.

Just navigate to the PaginationEnable pagination first so that you can use your CSS to hide the pagination navigation in the next step tab and click the box to Enable Pagination?

Step 3 – Install and Activate the CSS Addon

The next step you’ll need to install and activate Envira’s CSS Addon. Navigate to the Addons section and click Install then Activate on the CSS Addon.

Step 4 – The CSS

Below is the CSS we’ve used in our demo.

You’ll need to change this ID number to match your gallery ID number. You can find this by looking in the sidebar of your gallery edit screen.

For more information on how to find your gallery ID number you can read this article.

You can also just add this CSS to the WordPress Customizer to make this change for all of your Envira Galleries!

To find out more about the WordPress Customizer, please review our article on How to add custom CSS to the WordPress Customizer.

If you’re using the CSS Addon to only change 1 gallery, add your CSS to the Misc tab inside the Custom Gallery CSS box.

Add this CSS to the Misc tab in the Custom Gallery CSS box to hide pagination navigation
Once you’ve added your CSS just click Publish or Update to save the changes to the gallery.

div#envira-gallery-wrap-1490 .envira-pagination {
    display: none;
}
Be sure to update the -1490 with your own gallery ID number

If you’re going to want this change for all galleries, just remove the gallery ID number from the CSS and add your CSS to the Appearance » Customize » Additional CSS and click Publish to save the changes.

See the demo!

Would you like to check out more styling ideas for Envira’s Pagination Addon? Why not check out our article on How to Style Pagination Links?

FAQs

Do I have to use CSS for this?

A: Not at all! There are other ways to limit the number of images on a page using Envira Albums Addon (it would show only 1 image for each gallery in the album), the Envira Gallery Widget (by setting up how many images to display) or adding a limit number inside the shortcode.

[i]
[i]