Home Forum Help

Nav Block Settings and Styles

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

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.

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.

Background

When using this property, the popover background colour and caret colour will be modified.

  • In the Dropdown control panel, find Background.

  • Add a Background Colour as required.

Width

Dropdowns are not Fullwidth by default.

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

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.

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.

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.

Animation Duration

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

  • Find Duration and set as required.

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.

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.

  • 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.

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

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.

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.

  • Toggle on to hide Caret.

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.

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.

Radius

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

  • Find the radius property.

  • Modify as required.

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.

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.

Colour

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

  • Find Colour property and customise as required.

Size

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

  • Find Size property and adjust as required.

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.

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.

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.

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.

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.

If you want the Modal to be active from the desktop, select Desktop in the Show from dropdown.

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

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

Type

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

By default, the Modal is off-canvas.

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

Placement

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

By default the Modal is placed to the left.

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

Width

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

Animation

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

By default, the animation is set to Slide.

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

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.

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.

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.

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.

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.

  • Toggle on to show dropdown titles.

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.

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

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.

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

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.

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.

  • Select required logo image.

  • This will add a logo to your Modal.

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.

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.

Animated Trigger

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

Toggle off if you want to set up your own animated trigger.

  • Find Animated Trigger property in the Modal Visuals tab.

  • Toggle on for preset trigger animation.

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

Open Animation Modal Trigger

  • Find Open animation icon and click to customise.

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.

Open Animation Modal Trigger Size

  • Find Size property in open modal trigger section of the modal visuals tab.

  • Adjust size as required.

Close Animation Modal Trigger

See Open Animation Modal Trigger

Last updated