Navigation Position and Styling

Preset styles and positioning for your Essential Grid Navigation elements.

Table of Contents

1. Placement / Positioning

From your grid’s “Navigation” tab, drag and drop one of the Navigation options with your mouse into one of the available Dropzones.

Next, adjust the alignment and margin for the active Dropzone.


Quick Tip

Create a shortcode for your Navigation instead, and then add it anywhere on your web page, such as a Sidebar Widget.

Added to your site’s sidebar:


Widget shortcode not executing?

Add the following line of code to your theme’s “functions.php” file.

add_filter('widget_text', 'do_shortcode'); 

2. Navigation Skins / Styles

From your Grid’s “Skins” tab, select one of the available navigation skins.

Next, refresh the Grid’s preview to view the new Navigation Skin.

And then scroll to the grid’s preview to view the selected Navigation Skin.

Advanced Tip

Adjust a skin’s style by editing its CSS.

Live example of Navigation CSS editing:

Navigation Position and Styling

The Author


Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!

[tp_popular title="Popular Grids" regex="(grids|template_library)" count=3]


Join over 25.000 others on the Essential Grid and Slider Revolution email list to get access to the latest news and exclusive content.