1. Home
  2. Docs
  3. Header Elements
  4. Circle Menu

Circle Menu EA Element

With Circle Menu EA Element, you can display your call to action menu with amazing style and based on open/close method to keep it small in the beginning. It has a bubble menu, flat menu, and other variations. Circle Menu is an amazing widget for the Elementor page builder. You can achieve different circle navigation menu variations using this. Here in this tutorial, you’re going to learn how to use the Circle Menu element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Circle Menu Element

 

»Content

Circle Menu

Select the toggle icon for the circle menu.

Adding the Circle Menu Items

⇒Menu Title: Enter the menu title at first.

⇒Icon: Select a relevant icon for the menu so that viewers can easily recognize the purpose.

⇒Link: Add your section id WITH the # key. e.g: #my-id also you can add internal/external URL.

⇒Add Item: Use the ‘+Add Item’ button to add more menu to the list.

 

Layout

⇒Toggle Icon Position: Customize the toggle icon position either default of preset positions.

⇒Horizontal Offset: Customize the horizontal offset of the circle menu layout.

⇒Vertical Offset: Customize the vertical offset of the circle menu layout.

 

Additional Settings

⇒Menu Direction: Set the menu direction.

⇒Circle Menu Size: Customize the circle menu size manually.

⇒Circle Menu Distance: Customize the circle menu distance to display them properly.

⇒Speed: Set the menu appearing speed manually.

⇒Delay: Set the closing delay of the circle menu.

⇒Step Out: Customize the step out speed to control the stepping out of the menu one by one.

⇒Step In: Customize the step in speed to control the stepping in of the menu one by one.

⇒Trigger: Set the trigger of the circle menu either hover or click.

 

Unable To Use or Found Bugs?

⇒Need Support: Are you in need of a feature that’s not available in our plugin or got some bugs? Feel free to do a Support request.

 


»Style

 

Style

⇒Toggle Icon Size: Set the toggle icon size of the circle menu for different dimensions.

⇒Transition: Select the transition of the

Toggle Icon

⇒Background Color: Add a custom background color to the toggle icon for both normal and hover view.

⇒Color: Add a custom color to the toggle icon for both normal and hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the toggle icon for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the toggle icon border.

⇒Border Radius: Set the border-radius around the toggle icon for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the toggle icon for different dimensions. You can link the values together or customize them individually.

 

Circle Icon

⇒Background Color: Add a custom background color to the circle icon for both normal and hover view.

⇒Color: Add a custom color to the circle icon for both normal and hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the circle icon for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the circle icon border.

⇒Border Radius: Set the border-radius around the circle icon for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Padding: Set the padding value for the top, right, bottom and left around the circle icon for different dimensions. You can link the values together or customize them individually.

⇒Icon Size: Set the icon size of the circle menu for different dimensions.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Circle Menu Element.


Was this article helpful to you? Yes No

How can we help?