# Nav Block Settings and Styles

The Nav Block can be fully customised and styled from the Control Panel in the Primary tab.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FYnTdU2lKVl0gT6QkA2dx%2FScreenshot%202023-05-27%20at%2011.19.39.png?alt=media&#x26;token=978c89c8-4c00-406d-8168-e244b6aa6f6f" alt=""><figcaption></figcaption></figure>

## Main Settings Tab

The Main Settings tab contains the Dropdown tab, the Modal tab and the Link Effects tab.

## Dropdown Settings Tab

The Dropdown Settings Tab allows you to determine the trigger and styling options such as background colour, width, placement, type of animation, duration and group dividers.

* With the Nav Block selected, in the Primary tab, open the Settings tab and the Dropdown tab and the Dropdown Settings tab to open the Dropdown control panel.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FuDkqnLHcFPICNSInFCZF%2FScreenshot%202023-05-27%20at%2011.52.54.png?alt=media&#x26;token=ed0a64a6-1f11-4360-8854-917cce95482d" alt=""><figcaption></figcaption></figure>

### Trigger

The Dropdown Trigger allows you to determine whether the Dropdown opens on Hover or Click.

* In the Dropdown tab, find Trigger.
* Select Hover or Click as required.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Ff9kCAnPSOCd5LY0y7MbY%2FScreenshot%202023-05-27%20at%2011.56.26.png?alt=media\&token=fb7b6ed1-2b09-47a7-b844-38f89412e78c)

### Background

{% hint style="info" %}
When using this property, the popover background colour and caret colour will be modified.
{% endhint %}

* In the Dropdown control panel, find Background.
* Add a Background Colour as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FHyxZafsdt4Lnxv1ecFn4%2FScreenshot%202023-05-27%20at%2012.01.25.png?alt=media&#x26;token=2b9dc7f0-1bf3-4a70-b5cc-cd2c4a9d520e" alt=""><figcaption></figcaption></figure>

### &#x20;Width

Dropdowns are not Fullwidth by default.

* To make the Dropdown Fullwidth, find the Fullwidth toggle and toggle on.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FsmPfvTs7kre8kkP2vtYS%2FScreenshot%202023-05-27%20at%2012.05.29.png?alt=media&#x26;token=657992df-26e5-4506-9195-88ad218a0847" alt=""><figcaption></figcaption></figure>

### Placement

The Dropdown Placement property allows you to place your Dropdown to the left, centred or to the right.

* Find the Placement property and select required position.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fdm6NsVzfKI4abTeWSIHw%2FScreenshot%202023-05-27%20at%2012.09.41.png?alt=media\&token=310e6007-8d84-4d29-89ea-ed595ed94e2e)

### Offset

The Dropdown Offset property allows you to adjust the Dropdown Offset (distance from the Nav Items Block) as required.

* Find Offset property.
* Add required value to field.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FrK4auB7GP4ulvMejchyn%2FScreenshot%202023-05-27%20at%2012.12.47.png?alt=media&#x26;token=53942ba4-fc68-458f-b707-e954f0a876a3" alt=""><figcaption></figcaption></figure>

### Dropdown Animation

The Dropdown Animation property allows you to choose how the dropdown appears. You can choose between a wide range of options.

* Find the Animation property and select required animation.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fw4VRatutKqjwlKBLtr0y%2FScreenshot%202023-05-27%20at%2012.15.51.png?alt=media\&token=3aac1bac-d4ce-4e11-886e-55e3ae864e5b)

### Animation Duration

The Animation Duration property allows you to determine how long the animation lasts in seconds.

* Find Duration and set as required.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F9wV7T5SzloG2SHZl66dm%2FScreenshot%202023-05-27%20at%2012.19.11.png?alt=media\&token=b4cc147e-830b-4dc8-be6d-189a327ff24b)

### Group Dividers

The Group Dividers property allows you to add divisions between your groups. These can be styled as required from the Styles tab under Dropdown.

{% hint style="info" %}
When you add Group Dividers, you will see a space appear between your Groups. You will need to style the dividers to be able to visualise them on your page.

Before you can style Group Dividers, the Group Dividers toggle needs to be toggled on.
{% endhint %}

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fb0l82qHhtI0xE9Lx32h6%2FScreenshot%202023-05-29%20at%2010.17.49.png?alt=media&#x26;token=226fa6ab-6315-40bc-9415-5c699d1e5085" alt=""><figcaption></figcaption></figure>

* With the Nav Block selected, find the Group Dividers property and toggle on.
* Open the Styles tab and click Group Divider in the Dropdown section.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FX3sxVR34GtrSiBBHXtqW%2FScreenshot%202023-05-29%20at%2010.22.09.png?alt=media&#x26;token=7d5ebec8-6054-4b93-86d4-a08374233d30" alt=""><figcaption></figcaption></figure>

* This will open the Editor where you can style your Group Dividers as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fq51vWgbgQW3o7vZF0a58%2FScreenshot%202023-05-29%20at%2010.25.52.png?alt=media&#x26;token=81020202-dbab-446c-ae09-bd0a0e98bce5" alt=""><figcaption></figcaption></figure>

## Dropdown Visuals tab

The Dropdown Visuals tab allows you to style the Dropdown Caret and add and style a Dropdown Icon as required.

* Open the Visuals tab in the Dropdown tab of the Settings tab in the Primary tab.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F9txgpLsjmFHJcWeP5QZu%2FScreenshot%202023-05-29%20at%2010.29.57.png?alt=media\&token=df09d225-16c7-4b0f-a00a-c64defeb1a28)

### Dropdown Caret

The Dropdown Caret property allows you to hide or style the Dropdown Caret as required.

#### Hide Caret

The Hide Caret property allows you to choose whether or not the Dropdown Caret is visible.

* In the Visuals tab, find the Hide Caret property.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FgD9osN7XzxBZsmCpwZcf%2FScreenshot%202023-05-29%20at%2010.37.48.png?alt=media&#x26;token=2107affa-3db3-4c1c-82cf-61f737aedc07" alt=""><figcaption></figcaption></figure>

* Toggle on to hide Caret.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fvpg75qTJKNSqKTUUhHy2%2FScreenshot%202023-05-29%20at%2010.39.05.png?alt=media&#x26;token=9c93e502-6171-427c-849b-84f17e3aeafe" alt=""><figcaption></figcaption></figure>

#### Colour

The Colour property allows you to change the colour of the Dropdown Caret.

* In the Dropdown Caret section of the Visuals tab, find Colour.
* Modify Caret colour as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FHEzRUGW0l1ATUbHg5MB2%2FScreenshot%202023-05-29%20at%2010.54.24.png?alt=media&#x26;token=5e9d2a0a-b81f-4a4e-8f50-f5f970445a4d" alt=""><figcaption></figcaption></figure>

#### Size

The caret Size property allows you to modify the size of your Caret as required.

* Find Size in Caret section of Visuals tab.
* Modify size as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F81YhBQv4KR17iBmyGGJv%2FScreenshot%202023-05-29%20at%2010.59.04.png?alt=media&#x26;token=5d67579e-e9e2-4965-b60a-596558b5bcb0" alt=""><figcaption></figcaption></figure>

#### Radius

The Radius property allows you to modify the radius of your Caret as required.

* Find the radius property.
* Modify as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FRYINKrVkPxd054bE2C4O%2FScreenshot%202023-05-29%20at%2011.01.20.png?alt=media&#x26;token=10bc6535-4e33-4047-bbe4-89d04b70fd5a" alt=""><figcaption></figcaption></figure>

### Dropdown Icon

The Dropdown Icon property allows you to customise, add or remove the dropdown Icon on your menu.

#### Active

The Active property allows you to choose whether to display or hide an Icon.

* Find the Active property. Toggle on or off as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F8tVSt5I9BgDc0nXuoHfX%2FScreenshot%202023-05-29%20at%2011.02.44.png?alt=media&#x26;token=748dfdf6-cdb5-4d52-8e05-5df2e50188cc" alt=""><figcaption></figcaption></figure>

#### Icon

The Icon property allows you to modify the dropdown Icon.

* Find the Icon property. Toggle on or off as required.
* Customise Icon as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FZykixzwwT376bz7BKYxX%2FScreenshot%202023-05-29%20at%2011.04.29.png?alt=media&#x26;token=55edbe94-9a4a-452c-ad80-6e4237d1fd5c" alt=""><figcaption></figcaption></figure>

#### Colour

The Colour property allows you to modify the colour of your dropdown icon as required.

* Find Colour property and customise as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FAwYEeo0WxrhaaRpq5GW7%2FScreenshot%202023-05-29%20at%2011.06.44.png?alt=media&#x26;token=f38fe5c2-a38e-4dc3-9c98-de5f32b0f1ee" alt=""><figcaption></figcaption></figure>

#### Size

The size property allows you to modify the size of your dropdown icon.

* Find Size property and adjust as required.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FYVWftExKv43v0HKuoYGl%2FScreenshot%202023-05-29%20at%2011.09.06.png?alt=media\&token=8e5d675a-4be0-44f1-8040-abd184cbc738)

#### Open Rotation

The Open Rotation property allows you to modify the angle of the dropdown icon when a visitor opens the dropdown.

* Find Open Rotation property and customise opening angle as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F0KZVwGZfzbuSgyVgicbT%2FScreenshot%202023-05-29%20at%2011.19.04.png?alt=media&#x26;token=526a49d4-91f1-4455-9c4f-c6c9b0a83a55" alt=""><figcaption></figcaption></figure>

#### Closed Rotation

The Closed Rotation property allows you to modify the angle of the dropdown icon when a visitor closes the dropdown.

* Find Closed Rotation property and adjust angle as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FVdT1OpdkCFtdBjEx3e2P%2FScreenshot%202023-05-29%20at%2011.21.58.png?alt=media&#x26;token=699912cc-83eb-44c4-b53c-bb2f9a4e379f" alt=""><figcaption></figcaption></figure>

#### Duration

The Duration property allows you to choose how long the dropdown opening and closing animation should last.

* Find the Duration property and adjust duration as required.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FLGCenbdnsW3NAffk9T92%2FScreenshot%202023-05-29%20at%2011.33.20.png?alt=media\&token=ec952293-b064-45cc-b607-ce871d0ffcae)

## Modal  Tab

The Modal  tab allows you to modify options for modal view. You can choose between Settings and Visuals.

* Open the Modal tab in the Main Settings tab of the Primary tab.
* Open the Settings tab or the Visual tab as required.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F4mlAycSGSpXtduwR9wpw%2FScreenshot%202023-05-29%20at%2011.34.13.png?alt=media\&token=13afe552-31de-45ba-b47b-869c17fc26d1)

### Settings Tab

The Settings tab allows you to modify the Modal Settings.

#### Show From

The Show From property allows you to determine from what level of screen size you want the Modal to be active, such as Desktop, Tablet or Mobile.

{% hint style="info" %}
If you want the Modal to be active from the desktop, select Desktop in the Show from dropdown.
{% endhint %}

* Find the Show from property and select required starting screen size for the modal to be active in the dropdown.

&#x20;![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FAyDaoSvoIfNmYUivcG6e%2FScreenshot%202023-05-29%20at%2011.36.26.png?alt=media\&token=557fbe8e-dfdc-4b2f-a91f-7ee460475f06)

* If you choose Desktop in the Show from dropdown, the modal will be active from this level.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FZyno2urXn6L3iRMeFdNI%2FScreenshot%202023-05-29%20at%2011.39.27.png?alt=media&#x26;token=e3ac4077-c486-4054-8746-29ae9d5ece7c" alt=""><figcaption></figcaption></figure>

#### Type

The Type property allows you to determine whether the modal is full screen or off-canvas.

{% hint style="info" %}
By default, the Modal is off-canvas.
{% endhint %}

* Find the Type property in the Modal section of the Modal settings tab and choose between fullscreen or off-canvas.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fgzy0XeXruk7lqxlU19bL%2FScreenshot%202023-05-30%20at%2010.57.33.png?alt=media&#x26;token=28d13f9f-8f51-4030-a2ed-6a6278978f20" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F9TaT9q16gYIw13srXqMO%2FScreenshot%202023-05-30%20at%2010.58.34.png?alt=media&#x26;token=51eb3328-bbd2-48cf-a89b-2e7826200003" alt=""><figcaption></figcaption></figure>

#### Placement

The Placement property allows you to choose whether the modal is positioned to the left or right.

{% hint style="info" %}
By default the Modal is placed to the left.
{% endhint %}

* Find the Placement property in the Modal section of the Modal Settings and choose between Left or Right Placement.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FqcDvy1P9EbuZ1Tzi05Pl%2FScreenshot%202023-05-30%20at%2011.00.16.png?alt=media&#x26;token=13baff6d-69eb-435a-b509-4e3103d9eb01" alt=""><figcaption></figcaption></figure>

#### Width

The Width property allows you to determine the modal width as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FpYbi4CT08pqVTD3TNjLv%2FScreenshot%202023-05-30%20at%2011.05.28.png?alt=media&#x26;token=47618f5f-f17f-4ae9-b311-3bbac8e57c3b" alt=""><figcaption></figcaption></figure>

#### Animation

The Animation property allows you to determine how the Modal appears and disappears.

{% hint style="info" %}
By default, the animation is set to Slide.
{% endhint %}

* Find animation in the Modal settings tab and select required animation from the dropdown.

#### ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FkyWz09UmeeR54Ci2UFpl%2FScreenshot%202023-05-29%20at%2012.00.36.png?alt=media\&token=67e5809c-5d66-4445-bcef-e37f9a4814a9)

#### Duration

The Modal Duration property allows you to modify how long the animation takes.

* Find Duration in the Modal Settings tab and adjust as required.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FEnhVkHvWdSa4LbhM1GLx%2FScreenshot%202023-05-29%20at%2012.04.57.png?alt=media\&token=fb651c5b-5352-434c-8446-506c759c2d50)

#### Disable Page Scroll

The Modal Disable Page Scroll property can be toggled on to disable page scroll when the modal is open.

* Find Disable Page Scroll in the Modal Settings tab and toggle as required.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FxdV2E3b1097RyNgCetlK%2FScreenshot%202023-05-30%20at%2010.34.36.png?alt=media\&token=15ac925f-4792-452e-b1d1-2e6ff43d088e)

#### Transitions Duration

The Transitions Duration property allows you to choose how long you want the Modal Dropdown to take to open or close.

* Find Transitions Duration in the Modal Dropdown section of the Modal Settings tab.
* Set required duration.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F5UZq3Qt16TyyO597aXYs%2FScreenshot%202023-05-30%20at%2010.39.25.png?alt=media\&token=88773e52-5720-4402-a446-83a66228854b)

#### Title Tag

The Title Tag property allows you to add a Tag to the Modal Dropdown such as span, div, section etc.

* Find Title Tag property in the Modal Dropdown section of the Modal Settings.
* Select required Tag in the dropdown.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FQ4R5DWx7pSBx8dnEFUmn%2FScreenshot%202023-05-30%20at%2010.40.33.png?alt=media\&token=4a882156-bec3-427a-9f28-0c5d7fa080e6)

#### Hide Dropdown Titles

The Hide dropdown Titles property allows you to hide dropdown titles when in Modal view.

* Find Hide Dropdown Titles property in the Modal Dropdown section of the Modal Settings tab.
* Toggle off to show dropdown titles.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fn0pFj6KbqWQ5FR1TGSy9%2FScreenshot%202023-05-30%20at%2011.10.16.png?alt=media&#x26;token=2823e5d8-eeeb-435b-853f-552e59fd10b9" alt=""><figcaption></figcaption></figure>

* Toggle on to show dropdown titles.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FVBjeBYsOV0F350trZohm%2FScreenshot%202023-05-30%20at%2011.11.50.png?alt=media&#x26;token=e60a899f-a950-4de0-9fe4-2cc673e0d0a9" alt=""><figcaption></figcaption></figure>

#### Multi-level Body

The Multi-level Body property allows you to enable/disable multi-level body as required.

* Find the Multi-level Body property in the Modal Dropdown section of the Modal Settings tab.
* Toggle on as required to enable multi-level body.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FMJYc1rYyvskEglXD9LXl%2FScreenshot%202023-05-30%20at%2011.12.59.png?alt=media&#x26;token=0f83a10e-5230-4f78-babf-6d25dfe916df" alt=""><figcaption></figcaption></figure>

* Toggle off as required to disable multi-level body.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FuNehvkHBM3byR8fZY9Wv%2FScreenshot%202023-05-30%20at%2011.15.40.png?alt=media&#x26;token=2e020073-62e3-4126-89b4-65ec1c6077f6" alt=""><figcaption></figcaption></figure>

#### Multi-level Footer

The Multi-level Footer property allows you to Enable/Disable the multi-level body as required.

* Find the Multi-level Footer property in the Modal Dropdown section of the Modal Settings tab.
* Toggle on as required to enable multi-level footer.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FAkhzE3nVLWt4Xa2SIjhW%2FScreenshot%202023-05-30%20at%2011.23.19.png?alt=media&#x26;token=c0f333a3-1d9a-4bcd-ad83-90992ef4e07c" alt=""><figcaption></figcaption></figure>

* Toggle off as required to disable multi-level footer.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FQeJv557J3wP6N9uOFrpg%2FScreenshot%202023-05-30%20at%2011.22.09.png?alt=media&#x26;token=e531486c-be77-4950-ba67-a7fc66f212dd" alt=""><figcaption></figcaption></figure>

### Visuals Tab

The Visuals tab is where you can customise the visual aspects of the Modal such as Logo and Icon.

* Open the Visuals Tab in the Modal Tab.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FDDAJ4qgtXOR32EGq7ULX%2FScreenshot%202023-05-30%20at%2010.50.38.png?alt=media\&token=6163cd46-cb8d-4443-924a-ddc95fe34e4f)

#### Add Modal Logo

The Modal Logo property allows you to set and customise a Logo for your Modal.

* Find Modal Logo in Visuals tab.
* Click Search icon or Set Logo or input Logo URL as required to add a logo.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FkHHCEQU3k5Oj0ONOLFsE%2FScreenshot%202023-05-30%20at%2011.29.49.png?alt=media&#x26;token=59c8900d-dad9-4bc6-b8bd-375312dc2266" alt=""><figcaption></figcaption></figure>

* Select required logo image.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FJZjtQu7Z4N3t1Oy4D3MR%2FScreenshot%202023-05-30%20at%2011.31.20.png?alt=media&#x26;token=53a34b23-b133-4931-a39b-cfa2f378051a" alt=""><figcaption></figcaption></figure>

* This will add a logo to your Modal.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FnVUt3NTJb6bMLwbt9SDp%2FScreenshot%202023-05-30%20at%2011.33.58.png?alt=media&#x26;token=479abe8d-5005-4b18-afaf-ba9fefc1e170" alt=""><figcaption></figcaption></figure>

#### Add a LInk or Action to a Modal Logo

The Link icon allows you to add a link or an action to your modal logo.

* Find Link icon in  the modal Logo section of the Modal Visuals tab.
* Click to add a link or action.
* Choose between URL or Action and customise as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FTbthHHnRSqFrvzMZJwwR%2FScreenshot%202023-05-30%20at%2011.27.28.png?alt=media&#x26;token=bd363c66-617d-4856-b683-49ca84f2d670" alt=""><figcaption></figcaption></figure>

#### Modal Logo Wrapper

The Modal Logo Wrapper property allows you to adjust the width of your Logo.

* Find the Modal Logo Wrapper property in the Visuals tab of the Modal tab.
* Adust width as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FoBf3mHyozrHRlTwpfpux%2FScreenshot%202023-05-30%20at%2011.42.40.png?alt=media&#x26;token=ab9b6d3e-fabd-4e76-94bb-3b3570e7ee47" alt=""><figcaption></figcaption></figure>

#### Animated Trigger

The Animated Trigger property allows you to add a preset animated trigger to your modal.

{% hint style="info" %}
Toggle off if you want to set up your own animated trigger.
{% endhint %}

* Find Animated Trigger property in the Modal Visuals tab.
* Toggle on for preset trigger animation.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FW8LCCwmQWnbycrDuw0pR%2FScreenshot%202023-05-30%20at%2011.44.18.png?alt=media&#x26;token=7e3825b7-95f2-40ff-8f97-2ca599b18d52" alt=""><figcaption></figcaption></figure>

* Toggle off to set up your own modal trigger animation to open and close the modal.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F8ooAqL3AjpPjiYL9M8W0%2FScreenshot%202023-05-30%20at%2011.46.38.png?alt=media\&token=750934ca-a528-46c1-bd31-e234653d862f)

#### Open Animation Modal Trigger

* Find Open animation icon and click to customise.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fl1JmvwUxkIFoIDPXt3rK%2FScreenshot%202023-05-30%20at%2011.49.28.png?alt=media&#x26;token=8c9c2495-f191-4ae4-b765-f74217acedcc" alt=""><figcaption></figcaption></figure>

#### Open Animation Modal Trigger Colour

The colour property allows you to modify the colour of your open modal trigger.

* Find Colour property in open modal trigger section of the modal visuals tab.
* Choose required colour.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FuapZjjEYHbOSWGtD0X2n%2FScreenshot%202023-05-30%20at%2011.51.00.png?alt=media\&token=f1bdebe9-1c46-49a9-a64b-b37fe40c3102)

#### Open Animation Modal Trigger Size

* Find Size property in open modal trigger section of the modal visuals tab.
* Adjust size as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fc0IbJZhq3CsZcNMpgwlw%2FScreenshot%202023-05-30%20at%2011.52.32.png?alt=media&#x26;token=fc7f26e1-fc71-46f9-ae59-872f8b3898ad" alt=""><figcaption></figcaption></figure>

#### Close Animation Modal Trigger&#x20;

See [Open Animation Modal Trigger](#open-animation-modal-trigger)

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F5lT4FduhZBXMXDlCrb6U%2FScreenshot%202023-05-30%20at%2011.58.54.png?alt=media&#x26;token=287d907a-57f3-4b28-a54f-82487157deff" alt=""><figcaption></figcaption></figure>