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.
![](http://www.themepunch.com/wp-content/uploads/2018/05/add-navigation-dropzone.jpg)
Next, adjust the alignment and margin for the active Dropzone.
![](http://www.themepunch.com/wp-content/uploads/2018/05/dropzone-alignment-margin-1.jpg)
Result:
![](http://www.themepunch.com/wp-content/uploads/2018/05/navigation-position-preview.jpg)
Quick Tip
Create a shortcode for your Navigation instead, and then add it anywhere on your web page, such as a Sidebar Widget.
![](http://www.themepunch.com/wp-content/uploads/2018/05/shortcode-controls.jpg)
Added to your site’s sidebar:
![](http://www.themepunch.com/wp-content/uploads/2018/05/navigation-widget-addition.jpg)
Result:
![](http://www.themepunch.com/wp-content/uploads/2018/05/widget-navigation.jpg)
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.
![](http://www.themepunch.com/wp-content/uploads/2018/05/select-navigation-skin.jpg)
Next, refresh the Grid’s preview to view the new Navigation Skin.
![](http://www.themepunch.com/wp-content/uploads/2018/05/save-refresh-grid.jpg)
And then scroll to the grid’s preview to view the selected Navigation Skin.
![](http://www.themepunch.com/wp-content/uploads/2018/05/flat-dark-navigation-skin.jpg)
Advanced Tip
Adjust a skin’s style by editing its CSS.
![](http://www.themepunch.com/wp-content/uploads/2018/05/edit-navigation-skin-css.jpg)
![](http://www.themepunch.com/wp-content/uploads/2018/05/navigation-skin-css.jpg)
Live example of Navigation CSS editing: