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

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

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!