Table Of Contents

Circle Menu Widget

How to Use Circle Menu Widget

We have made the Circle Menu Widget for our subscribers. In a different way, we can display a menu on a web page. This documentation is mainly about the customization of the widget.

Step-by-step instructions and detailed pictures below will help you to get started.

To Insert Widget

inserting Circle Menu Widget

Inserting the widget is just a matter of drag and dropping. As you see in the screenshot above, drag the WordPress navigation menu inside your page editor.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part of a website[option be added]. And in this regard, some handy sections in the tab will assist you a lot in making the mobile menu layout.

Circle Menu

After dragging and dropping the widget in a new section, you will get a list group. The list is not limited, you can add a new list in the group by just clicking on the ADD ITEM button.

elementor circle menu items

You can edit every single list item(repeater). Simply, hit on the List Item and edit the field found in the List Item. Then, set Logo Image, Brand Name, Website Url, and especially Tooltip (yes/no) included in the list item.

Most importantly, you can set a total of five types of icons to the Toggle such as Plus, Plus Circle, Close, Settings, and Bars for the Circle Menu Widget.

circlemenu 2 - BdThemes

In terms of getting the content with the same design, you can duplicate the item by clicking on the duplicate icon and to delete clicking on the delete icon. 

Simply, go to the Content tab > Circle Menu.


circlemenu 3 - BdThemes

In this section, you’ll be able to set Toggle Icon Position and along with Offset horizontally and vertically.

Just, go to the Content tab > Layout.

Additional Settings

circlemenu 4 - BdThemes

Here, you have two crucial things to do namely Menu Direction and Trigger (Hover/ Click).

Go the Content tab > Additional Settings.

Style Tab

Now, let’s work with the Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design the WordPress navigation menu. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


circlemenu 7 - BdThemes

This section will let you go to set the Toggle Icon Size and Transition.

Look at the screenshot.

Toggle Icon

Circle Menu Widget toggle icon

Here, you can add Background color and Text color, and more things like Border Type, Width, Color, Border Radius, Box Shadow, and Padding.

Just go to the Style tab > Toggle Icon.

Circle Icon

mobile menu icon

There are two modes Normal and Hover. In the Normal mode, you’ll be able to add Background, Color, Border, Icon Size, etc.

On the contrary, in the Hover mode, you can set Background Color and Color only for the Elementor circle menu.

Go to the Style tab > Circle Icon.

Video Assist

In conclusion, I hope it is very much clear to you how to use Elementor Circle Menu Widget by Element Pack. You can watch a video on it and also go to our demo page

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.