I recently bought Avada theme for WordPress. No doubt it is one of the hottest WordPress themes on the planet at the moment. According to their website, it boasts a total of 575,000+ premium customers as per the writing of this post.
Anyway, let’s forget about Avada’s accolades and their impressive success for now. Let’s look at why I chose Avada, and how you can use it to create stunning header and menu design.
I chose Avada because of its unrivalled flexibility, extensive feature elements, multilingual language support, bbpress forums and its large collection of demo inspirations. The price is also friendly at $60. Though I felt limited by their policy of one domain installation per license.
Lets now dive in and see how we can build a beautiful icon menu using Avada.
Step by step how to create a custom icon menu with a call to action
Create your menu
To begin, head to your WordPress backend and click on
Appearance >> Menu
Once it has opened, click on create menu and add the pages you would like to display then save.
2. Set created the menu as main menu
To set the created menu as the main menu, simply click on manage locations.
Under manage locations, set your created menu as the main menu and save changes.
Refresh your website and your menu should display as below. A plain text normal menu.
3. Setting menu icons
This is the exciting part where Avada plays boss! To set icons on the menu items simply click the edit menu.
Under the main menu, we will set the home link with the home icon
To achieve this, click on the drop-down on the home menu element to open the dropdown context. Then click on Avada Menu options button.
The Avada menu options will display as below
We will now go through the settings. The Menu first level style setting requires you to choose how you want to display your menu icon. The default style displays the icon as the menu. The button options are available for us to choose from, we will use those later in the call to action section.
Next, we will locate the home icon using the icon select setting. In case you don’t like the home icon available, you can always add a custom icon by uploading using the plus button on the right-hand side. Click on the home icon to select.
To avoid the menu text from displaying, we will set the Icon/thumb only setting to be ON.
Should you want to set the highlight text and colours feel free, in our case it is not necessary. Extra settings are available for example modal and mega menu which you may use it to your liking.
To conclude, save the Avada menu options changes then save the menu main menu settings. Refresh your website and alas! Your menu on the homepage link will now be replaced with a home icon.
We will repeat the same steps above for My Account menu link and the Checkout menu link. The final icon menu will display as below.
4. Adding a call to action – CTA
We have come a long way but there is one more thing. Making the contact Menu link to be a call to action button. This should be easy as the process is similar to the above. The difference is that under the Menu First Level Style, we will choose the Button medium option instead.
Ensure the icon thumbnail only is OFF then click save the Avada Menu Options followed by saving the main menu. Your final menu should appear as below.
It is a wrap! I hope you have enjoyed the article and have learnt something. If you have purchased Avada theme, go ahead and experiment with the icon menu for your website today. Also, consider making your menu call to action stand out by using buttons.