Editing MegaMenu and Mobile Menu in Refari Build Websites

Created by Ritesh WebDev, Modified on Thu, 14 Aug at 4:36 PM by Liam Refari



This article explains how to edit the MegaMenu and Mobile Menu for Refari Built websites using WordPress and Elementor. You will learn the step-by-step process for accessing and modifying menus to better customise your site’s navigation for both desktop and mobile views.

Accessing and Editing the MegaMenu in Elementor

To begin editing your MegaMenu, first log into your WordPress account. Hover over the "Edit with Elementor" option on the header section of your site. Select the header (often labeled as Header or MegaMenu) to load the Elementor editor.

Once Elementor loads, you will see two sections: one for the Mobile Menu and one for the Desktop MegaMenu. To edit the MegaMenu:

  • Select the entire MegaMenu area.
  • You will see all the listed MainMenu items displayed.
  • To add a new MainMenu item, simply duplicate an existing menu item.
  • Change the text and link URL to suit your new menu item.
  • Click "Publish" to save and apply the changes.

After publishing, refresh your website’s page to see the updated MegaMenu with the newly added items.

Editing MegaMenu Content Cards

Some MegaMenu items may contain content cards with images, titles, and descriptions. To update these:

  • Edit the image by selecting it within the card section.
  • Modify the title text as needed.
  • Change the description field to reflect your content.
  • Once edits are complete, publish the changes to update the live site.

Editing the Mobile Menu via WordPress Backend

Mobile menus are managed differently from the MegaMenu. To edit the mobile menu:

  1. Log into your WordPress backend.
  2. Navigate to Appearance > Menus.
  3. Choose the main menu you want to edit or add to.
  4. To add a new item:
    • Enter the URL and menu label (e.g., "Test Menu").
    • Click the "Add to Menu" button.
  5. After adding or removing items, click "Save Menu".
  6. Refresh your website on a mobile device or use the browser's device preview mode to confirm changes.
  Notes: Always ensure you have backed up your site before making major menu changes. Use Elementor publishing cautiously to avoid overwriting important edits.
  Ideas: Consider creating custom labels for menu items specific to your brand or promotions. You can append these labels in the menu text fields in Elementor or WordPress to draw attention.
  Other articles you might be interested in: How to Add a Popup to Your Refari Website Using Elementor

Using Elementor and WordPress together provides powerful tools to customise both MegaMenus on desktop and simple menus on mobile to enhance user navigation. Remember that changes to the mobile menu must be done via WordPress backend Appearance > Menus, while MegaMenu edits happen inside Elementor.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article