Request for Menu Bar Creation Similar to Murad’s Website

This topic has 5 replies, 2 voices, and was last updated 2 weeks, 5 days ago by Hung Pham.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
October 24, 2024 at 9:27 am #607242

tradeadaptkorea
Participant

We would like to create a menu bar similar to the one on Murad’s website, where various categories are clearly divided and displayed.

As shown in the Murad menu bar image I am sending, the main categories will include:

Sets by Duration
Products – Best Sellers, Diet Products, Vitamins, Arginine, etc.
Shop by Ingredients – Green Tea, Garcinia Cambogia, etc.
Body Concerns
Additionally, we would like to include a product image of our bestseller with a purchase link on the right side of the menu bar, as seen in the reference image.

Could you please guide us on how to create this kind of menu bar?

We also want to make the mobile version the same as the desktop version. I have attached the mobile version image for your reference. Please take a look.

Attachments:
You must be logged in to view attached files.

October 25, 2024 at 11:08 am #607550

Hung Pham
Keymaster

Hello tradeadaptkorea,

Thanks for reaching to us and appreciate your patience.

You can create a dev site and import any template there, then with the help of the import functionality of Elementor you can export HTML Blocks, more detail is here: https://elementor.com/help/template-library/

Devsite – also called a Staging platform where you can test issues, enable/disable features/plugins thus such changes will affect the main site. The below article will help you to create it:

https://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/

Then, please read our documentation on how to import/export header:

https://xtemos.com/docs-topic/how-to-export-import-headers/
https://xtemos.com/docs-topic/create-mega-menu/

Best Regards,

October 29, 2024 at 8:16 am #608251

tradeadaptkorea
Participant

I am using Elementor Pro and trying to create a Mega Menu, but it’s very challenging. Could you please provide a step-by-step guide on how to create and edit the Mega Menu? I’ve tried using templates and the editor, but I’m unsure how to proceed.

Could you share the easiest way to edit the Mega Menu? Do I need to create categories first?

The attached file shows a sample menu bar that I’d like to add under the SHOP menu. Also, please let me know how to add product images and link them to product pages, like on the Murad website.

Attachments:
You must be logged in to view attached files.

October 30, 2024 at 8:45 am #608596

Hung Pham
Keymaster

Hello tradeadaptkorea,

Please follow our documentation article https://xtemos.com/docs-topic/create-mega-menu/

We cannot offer support to create Mega Menu with Elementor Pro, please read through their documentations for more details.

Best Regards,

October 30, 2024 at 9:36 am #608614

tradeadaptkorea
Participant

Is this possible? To add product images within the mega menu and link them to product pages

October 30, 2024 at 2:41 pm #608742

Hung Pham
Keymaster

Hello tradeadaptkorea,

That’s possible. You can take a look this demo https://woodmart.xtemos.com/megamarket/

You can create a dev site and import any template there, then with the help of the import functionality of Elementor you can export HTML Blocks, more detail is here: https://elementor.com/help/template-library/

Devsite – also called a Staging platform where you can test issues, enable/disable features/plugins thus such changes will affect the main site. The below article will help you to create it:

https://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/

Then, please read our documentation on how to import/export header:

https://xtemos.com/docs-topic/how-to-export-import-headers/
https://xtemos.com/docs-topic/create-mega-menu/

Best Regards,
Author

Posts