Nav Block Settings and Styles
Last updated
Last updated
The Nav Block can be fully customised and styled from the Control Panel in the Primary tab.
The Main Settings tab contains the Dropdown tab, the Modal tab and the Link Effects 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.
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.
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.
Dropdowns are not Fullwidth by default.
To make the Dropdown Fullwidth, find the Fullwidth toggle and toggle on.
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.
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.
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.
The Animation Duration property allows you to determine how long the animation lasts in seconds.
Find Duration and set as required.
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.
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.
The Dropdown Caret property allows you to hide or style the Dropdown Caret as required.
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.
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.
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.
The Radius property allows you to modify the radius of your Caret as required.
Find the radius property.
Modify as required.
The Dropdown Icon property allows you to customise, add or remove the dropdown Icon on your menu.
The Active property allows you to choose whether to display or hide an Icon.
Find the Active property. Toggle on or off as required.
The Icon property allows you to modify the dropdown Icon.
Find the Icon property. Toggle on or off as required.
Customise Icon as required.
The Colour property allows you to modify the colour of your dropdown icon as required.
Find Colour property and customise as required.
The size property allows you to modify the size of your dropdown icon.
Find Size property and adjust as required.
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.
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.
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.
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.
The Settings tab allows you to modify the Modal Settings.
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.
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.
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.
The Width property allows you to determine the modal width as required.
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.
The Modal Duration property allows you to modify how long the animation takes.
Find Duration in the Modal Settings tab and adjust as required.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Find Open animation icon and click to customise.
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.
Find Size property in open modal trigger section of the modal visuals tab.
Adjust size as required.
See Open Animation Modal Trigger
