How can I create a mega menu like the one in your demo?

Hello @Recep,

The Mega Menu is one of the menu types available in XStore. It displays multiple options and sections in a dropdown format, making it ideal for websites with extensive content or complex structures.

For more information, please refer to our documentation: https://www.8theme.com/documentation/xstore/menu-set-up/mega-menu/

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Recep,

Thank you for reaching out to us. We appreciate your message and will review your request as soon as possible. If you have any additional details or questions, please feel free to share them so we can assist you more effectively.

Best Regards,
Jack Richardson
The 8Theme’s Team

Hello @Recep,

1. You can customize the colors in “Header Builder → Dropdown” (https://prnt.sc/ez1aq-sevR1_). If you would like to implement changes that are not available in the default options, please use custom CSS:

To set a bold heading:

.et_b_header-menu.et_element-top-level .item-design-mega-menu .nav-sublist-dropdown .item-level-1 > a {
    font-weight: 600;
    color: blue;
}

To set a custom color for sub-items on hover:

body .et_b_header-menu.et_element-top-level .nav-sublist-dropdown .item-link:hover {
    color: red;
}

2. Since you are using the Header Builder based on the Customizer, you can create a separate menu in your dashboard under “Appearance → Menus” and assign it in your Header Builder (https://prnt.sc/bUgBZgJpS0hp). Then, you can set the content for your “All Departments” menu items (https://gyazo.com/9a30de2417f93a9e2f5f608b58c933d6) using a static block created with the builder or custom content. For more details, please refer to: https://www.8theme.com/documentation/xstore/menu-set-up/mega-menu/.

As you are using Elementor, you can import prebuilt content into your new static blocks using “XStudio”: https://www.8theme.com/documentation/xstore/xstore-features/xstudio-feature-of-xstore-wordpress-theme/.

3. You can adjust the padding in the “Computed Box” of your Dropdown Menu settings in the Header Builder (https://prnt.sc/3v-dB1RJBdlt -> https://prnt.sc/EyKy7k9r3GE1). Alternatively, you can modify the spacing using custom CSS.

For guidance, please see: https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/.

Best regards,
Jack Richardson
The 8Theme’s Team