Element Settings: Bar Settings

This article will review the Bar Settings inside the Hamburger Icon Component in the Navigation Element. 

A hamburger menu is typically three stacked lines that indicate a hidden menu. The Bar Settings allow you to customize these bars to fit your page’s design.

Important Note: The hamburger icon is only visible on the mobile version of your page.

Requirements: 

• An active ClickFunnels 2.0 account
• A Navigation Element added to a page

TABLE OF CONTENTS

• Bar Style:
• Bar Size:
• Bar Color:
• Background:
• Bar Border Radius:
• Justification:
• Supported Elements:

Bar Style:

Select how many lines to display in the Hamburger Icon.

Three lines look like this:

Two lines look like this:

Back to Top

Bar Size:

Use the slider to select how thick or narrow the bars on the menu will be.

Examples:

Back to Top

Bar Color:

Choose a color for the bars.

Click here to learn more details about the Color Picker. 

Back to Top

Background:

Choose a color for the background.

Click here to learn more details about the Color Picker. 

This is an example of how the Bar and Background color looks:

Back to Top

Bar Border Radius:

Use the slider to round the corners of the bars.

This is an example of how rounded the corners can be:

Back to Top

Justification:

Select where to show the hamburger menu. It can be aligned to the right, left, or centered. 

This is an example of how it looks centered:

Back to Top

Supported Elements:

This setting can be found in the following Elements: 

• Component: Hamburger Icon (Navigation) 
• General Element: Navigation 

Back to Top