This article will cover information on the Navigation element. The Navigation element is one of the General-type elements in the page editor.

This element can be found in the Elements menu by mousing over a current element on the page and clicking on the orange Add Element button. You can scroll through the menu to locate it, click on the General Element Group or type Navigation in the Search elements Field.

 

Also clicking on and holding the element is a method that can be used to drag it into the desired position.

 

---

Navigation Element Menu

Move

Clicking and holding the move icon will allow the element to be dragged to a new location on the page.

 

Element Name

This is the name of the currently selected element. The name given will be the default name of the element. The name can be changed in the CSS info of the Coding menu.

 

Settings

Clicking on this gear icon will open the individual settings of the element. Each element has specific settings based on its functions. Please check the Settings section below for further information.

 

Clone

The clone icon will duplicate the currently selected element and place it below the current element.

 

Coding

Custom CSS can help extend the design of each section on the page to meet specific needs both visually and functionally. As the code requires, one can add coding to one of three areas: CSS, Header, or Footer.

 

The CSS info for the element is on the right of the CSS window. The title of the element can be changed in the title field to allow for easier identification. Due to the many different styles and uses of custom coding, ClickFunnels' Support Agents will not troubleshoot specific codes. Instead, submit a request for help in the Coding section of our Community, or reach out to the code provider for support.

 

Trash

Clicking on the trash icon will delete the element from the editor.

 

---

Navigation Element Settings

Layout Path

This section of the settings will show where the current element is located within the page's layout.

 

Element title

The current element's title is located at the top left of the settings. The element's title can be changed via the coding button.

 

Coding button

The coding button will open the page coding menu. Opening the coding menu will allow codes to be added to pages and can change the element's title for easier searching.

---

Settings Menu

Top margin

The top margin slider is used to set the spacing between the top of the current element and the bottom of the element above it. Entering a negative number in the field will cause the lower element to overlap the top element.

 

---

Navigation Links

This is where menu items, submenus, and blog submenus are set up within the Navigation Menu element.

---

Item Names

Next to a menu item, sub menu item, and/or blog submenu item will be a name.

---

Add an item, sub menu, or blog submenu

Hovering the mouse over an item, sub menu, or blog submenu, the following two icons will appear.

Clicking the plus icon will add a new item, sub menu, or blog submenu under the currently select item, sub menu, or blog submenu.

Clicking the trash icon will delete the the item, sub menu, or blog submenu that the mouse is currently hovering over.

New Menu

Clicking this will add a new item to the Navigation Menu.

 

Submenu

Clicking this will add a new sub menu to your Navigation Menu.

 

Blog Submenu

Clicking this will add a new blog submenu to the Navigation Menu.

 

Image

Clicking this will add an image item instead of a text item.

 

Overlay Display

Click here to show or hide the overlay.

---

Editing Each Item

Editing each menu item, sub menu, and/or blog submenu can be done by clicking on the name of the menu item.

---

Navigational Window

When the name of an item is clicked, the following Navigation Link Window appear.

---

Navigational Window Settings

Menu Name

The name of the item, sub menu, and/or blog submenu can be changed here.

 

Link to

Select where this Navigational Link will link to.

 

Custom URL

Select Custom URL to link the Navigation Link directly to a specific URL

Inset the custom specific URL here. The https:// is already included and is not needed when typing in the specific URL.

 

Customer Action Link

Select a specific Section, Row, Column, or Element to link the Navigation Item to. This will make the page instantly scroll down to the desired section, row, column, or element.

#

Place the specific # CSS name of the section, row, column, or element here.

 

Open in New Window

When selecting this box, a new window will display within the browser when the Navigation Item is clicked.

 

Open Full Setting

 

Click this to open all the settings for this Navigation Item. The types of settings that can be changed here are color, font, style, spacing, and much more!

 

---

 

Image Item Navigational Window

The Navigational Window of an Image Item is different from the navigational menu of the other types of menu items. Below shows the settings of an Image Item.

Image URL

Click here will allow an image to be selected for the item.

 

Alt Text

This is where alt text can be entered to describe the image.

 

Link Action URL

 

Click here to get a drop down list of the following Link Actions.

Below describes each Link Action Option

#open-popup

This will open the popup on the page.

#submit-form

This will submit the current form on the page.

?next_funnel_step=true

This will send the customer to the next page within the site/funnel.

#close-popup

This will close the popup on the page.

?page_action=mark_complete

This will show marked complete.

Target

This will give the option to have the page open in the same window or a new tab.

 

Open Full Setting

Click this to open all the settings for this Navigation Item. The types of settings that can be changed here are color, font, style, spacing, and much more!

---

Exiting a Navigation Link Window

To exit out of the Navigation Link Window, either click the X in the top right or click anywhere outside of the Navigation Link Window.

---

Component Settings

Hamburger Icon

Click here to open up the full settings of the hamburger icon. The hamburger icon is what displays when the navigation menu is collapsed.

 

Overlay

Click here to open up the full settings of the overlay. The Overlay is what is shown once the hamburger icon is clicked.

 

Orientation

Select either a horizontal layout or vertical layout of the navigation menu.

 

Gap

The gap slider is used to set the distance between the menu items in the element.

 

Collapse

The collapse option is used to set the Navigation menu to show at all times, or collapsed in mobile view, or collapsed in both mobile and desktop views. When the Navigation menu is collapsed, it will display a hamburger icon similar to this…

When the collapsed icon is clicked it will expand to show the full navigation menu.

Never

When Never is selected, the navigation menu will not show collapsed in mobile view and will not show collapsed in desktop view.

 

Mobile

When Mobile is selected, the navigation menu will only show collapsed in mobile view and will not show collapsed in desktop view.

 

Always

When Always is selected, the navigation menu will show collapsed in both mobile view and collapsed in desktop view.

 

Justification

Click the options to select the orientation of your Navigational menu. You can have your menu aligned to the left or right, in columns or spread out.

---

Size & Position

Width

Change the width of the Navigation Menu element here.

---

Padding

Top

The top padding slider is used to set the space from the top of the element box to the materials displayed in the element box.

 

Bottom

The bottom padding slider is used to set the space from the bottom of the element box to the materials displayed in the element box.

 

Left Right

The side padding slider is used to set the space from the left and right sides of the element box to the materials displayed in the element box.

---

Typography

Style

Set the style for the element text with the preset sizes or the custom choice by selecting the three dots.

 

Edit Style

Clicking this button will open the style guide page for the page. Please save your work before clicking this button.

 

Override

The override button will open the custom settings that will be different from the style guide.

 

Font Family

Clicking on the font family button will set the font of the element. This will override the general typography setting of the page.

 

Weight

The weight of the font lines can be set from this drop menu from: thin, regular, or semi-bold.

 

Font Size and Font Size Mobile

Set the font size for both desktop and mobile viewing here. If one wants the mobile font size to be different from the desktop font size, click the link icon to separate the two settings. Unlinking the text will allow one to set font sizes independent of the other view.

 

Letter Spacing

The spacing between the letters of this element can be set with this slider.

 

Line Height

The spacing between the lines in the element can be set with this slider.

 

Line Height Mobile

This will change the spacing between the lines in the element while in mobile view.

 

Link

The text color of hyperlinks

 

Text Casing

Letter casing can be selected using all lower case, all upper case, or upper and lower case.

 

Decoration

Choose to add one of three decorations to the text: underline, strikethrough, or under and overline.

 

Opacity

Opacity will allow you to set the transparency of the text from invisible to full strength.

 

Background Color

The background color of the element can be assigned using this field.

 

---

Text Shadow

Toggling the Text Shadowing setting will open the following settings below:

 

Offset-X

Set the shadow from directly beneath the text and move to the right. Entering negative numbers in the field to have the shadow move to the left.

 

Offset-Y

Set the shadow from directly beneath the text and move it below. Entering negative numbers in the field to have the shadow move above the text.

 

Blur

The sharpness of the shadow can be set sharp to blurred using this slider.

 

Color

Shadow color can be assigned using this field.

 

---

Shadow

Toggling the Shadow setting will open the following settings below:

 

Style

Select one of the three pre-designed shadow styles based on your theme – or select custom – by clicking on the three dots.

 

X-direction

Set the horizontal or left to right position of the shadow.

 

Y-direction

Set the vertical or top or bottom position of the shadow.

 

Blur

Set the crispness of the edges of the shadow.

 

Spread

Controls the size of the shadow.

 

Color

Choose a color for the shadow.

 

---

 

Submenu Settings

Submenu Gap

The Submenu gap slider is used to set the distance between the submenu items

 

Submenu Justification

Click the options to select the orientation of your Submenu. The submenu can be aligned to the left, right, or center.

 

Submenu Size

Change the width of the submenu here.

 

---

Submenu Padding

Top

The top padding slider is used to set the space from the top of the element box to the materials displayed in the element box.

 

Bottom

The bottom padding slider is used to set the space from the bottom of the element box to the materials displayed in the element box.

 

Left Right

The side padding slider is used to set the space from the left and right sides of the element box to the materials displayed in the element box.

 

---

 

Submenu Colors

Bg Color

Select the background color of the submenu

 

Text Color

Select the color of the text visible within the submenu

---

Submenu Shadow

Toggling the Submenu Shadow setting will open the following settings below:

 

Style

Select one of the three pre-designed shadow styles based on your theme – or select custom – by clicking on the three dots.

 

X-direction

 

Set the horizontal or left to right position of the shadow.

 

Y-direction

 

Set the vertical or top or bottom position of the shadow.

 

Blur

Set the crispness of the edges of the shadow.

 

Spread

Controls the size of the shadow.

 

Color

Choose a color for the shadow.

 

---

Submenu Border

Toggling the Submenu Border menu will open the following settings:

Choose which sides of the element show the border.

 

Border Style

Choose a border style (straight line, dashes, or dots).

 

Color

Choose the color of your border.

 

Stroke size

Adjust the thickness of your border.

 

---

Corners

Toggling the Corners menus will open the following settings to set the corner roundness.

 

All Corners

Use this border radius to set the amount of curve for the corners.

 

Separate Edges

Enabling will allow you to set a different radius for each corner.

Advanced Settings

 

Animation

The animation section of the settings will allow you to add dynamic movement to your page.

 

Style

 

You can select the style of animation to be applied to your element from the dropdown list.

 

Trigger

Select the trigger type that will start the animation.

 

Timing Function

Select the timing of the animation.

 

Play Direction

Select the direction the animation will play in (forwards, reverse, or repeating.).

 

Duration

Duration is the amount of time it will take for the animation from start to completion in milliseconds.

 

Delay

Delay is how long it will take for the animation to start after the trigger is set.

 

Animate Once

This check box will stop the animation from being triggered multiple times.

 

Preview Animation

Clicking on the “Preview animation” button will allow you to see the animation in the editor.

 

---

Advanced

Dynamically populated

Dynamically populated allows the use of variables in double curly brackets like {{blog.url}} or {{course.url}}.

 

---

Render Conditions

Adding conditions to a section, row, or element will allow for custompage renderings based on the conditions set.

---

Custom Attributes

This setting will allow for creating custom attributes or to be able to add data-title attributes for sections, rows, and elements. The use of a data-title is a reliable way to make reusable custom code for both CSS and JS to affect the page.

 

---

Views and Trash

• The All icon sets the element to be visible on both Desktop and Mobile versions of the page.

• The Desktop icon will set the element to only be visible on the desktop version of the page.

• The Mobile icon will set the element to only be visible on the mobile version of the page.

• The Eye with a Line icon will hide the element on all views. You can use the Layout Menu in the editor to locate hidden elements.

• The Trash icon will delete an element from the page.

---

If you have any questions about this, please contact our Support Team by clicking the Submit a Request button at the top right-hand corner of this page and then the Help button at the bottom left of the ClickFunnels Page.