Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Reposition Lightbox Close and Nav Arrows

Envira Gallery is highly customizable, including the ability to reposition the lightbox close and nav arrows for your galleries.


Move Arrows Inside/Outside of Lightbox Image

You can control this setting through the Lightbox tab settings by following our documentation!


Fix Close Icon and Arrows to Edges of Browser Window

Add the following CSS to the bottom of your active theme’s style.css file to apply the style to all gallery lightboxes on your site:

NOTE: The following is an example to help you get started; you may need to modify to suit your specific needs.

/* Move the close icon */
.envirabox-close { position: fixed !important; top: 5px !important; right: 5px !important; }

/* Move the prev/next navigation arrows and make them always visible */
a.envirabox-nav span { visibility: visible !important;  position: fixed !important; }
.envirabox-prev, .envirabox-next { position: fixed !important; width: 40% !important; }

/* Make sure the prev/next nav arrows are consistently positioned regardless of inside/outside configuration */
.envirabox-prev { left: 0 !important; }
.envirabox-next { right: 0 !important; }

You can position your lightbox close and nav arrow icons to the edges of the browser window regardless of the size of the image displayed in lightbox view.