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.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article