Modify Styling of Navigation Elements

Essential Grid includes several built-in navigation skins that you can choose from.

This article will cover how you can alter the styling of your selected navigation skin.

1. To get started, from the "Nav-Filter-Sort" tab, add a Navigation element to one of the grid's "Dropzones".

2. Next, head over to the grid's "Skins" tab, and select a skin for the navigation.

3. To see a preview of your selected navigation skin, click the "Refresh Preview" button and then scroll to the bottom of the page.

4. Click the "Edit Skin" button to change the navigation skin's CSS.

5. You'll then see the following modal where the navigation styles can be edited.

5.1 Alter non-selected / non-hovered styles:

5.2 Alter selected / hover styles:

5.3 After changing the above two colors, click the "Refresh Preview" button, and here's what our altered skin would look like:

• 1. color
• 2. background-color
• 3. border
• 4. padding
• 5. font-size
• 6. font-family
• 7. border-radius
• 8. box-shadow