Some Question on drop down mega menu items

Hello,

Thank you for contacting us and for using XStore.

Could you please provide temporary wp-admin access?

To grant WP-Admin access, please proceed to create a new user account with an administrator role through your WordPress Dashboard. Once the account is established, you may securely transmit the username and password to us via the Private Content section designated for this purpose.

Best Regards,
8Theme’s Team

Dear @kmc,

I hope this message finds you well. We have recently reviewed the menu structure in the header of your website and would like to offer some recommendations for enhancement.

We noticed that you are currently utilizing the Mega Menu functionality for each submenu item. While this feature is beneficial for displaying extensive content within dropdown menus with stretched wide content, it may not be necessary for simpler menu configurations. For a more streamlined navigation experience similar to the example provided here: https://prnt.sc/zOIDSHGfugWD, we suggest configuring your dropdown menus using the standard WordPress menu system. You can easily create and select your menu at this location: https://prnt.sc/GU2_seg7NzAZ. Also, such implementation will make not deep DOM structure that is a good way to make the web-site with optimized for SEO and Pagespeed testers.

Please consider implementing these suggestions to enhance the usability and appearance of your website’s navigation. Should you have any questions or require further assistance, do not hesitate to contact us.

Best regards,
Jack Richardson
The 8Theme Team

Dear @kmc,

We hope this message finds you well.

We are pleased to inform you that our menu widgets designed for Elementor encompass the essential functionalities necessary for creating and modifying structures to meet the requirements of approximately 95% of our clients.

For detailed settings related to the Mega Menu widgets, please visit the Styles tab at the following link: https://prnt.sc/WH4M6ytO42ze. Here, you will discover comprehensive solutions and responses to your inquiries. We encourage you to explore this section thoroughly to fully understand and utilize the features available within this widget.

Should you require further assistance or have additional questions, please do not hesitate to contact us.

Best regards,
Jack Richardson
The 8Theme Team

Dear @kmc,

I hope this message finds you well. Could you kindly provide us with a screenshot detailing the specific configuration issues you are encountering? We are eager to assist you in setting up the correct settings.

Best regards,
Jack Richardson
The 8Theme Team

Dear @kmc,

I hope this message finds you well. We have reviewed the issue regarding the typography settings not being applied to the Main Menu element of your header. Upon examination, it appears that the issue stems from the custom CSS that has been implemented for Mobile menu element. Specifically, the CSS does not adhere to the standard practices required for effective application, as illustrated in your screenshot (https://prnt.sc/4woE4d5-TJoi) and our guidelines (https://prnt.sc/G7HTstR6fwCM).

Please note that while we strive to support our customers in every way possible, we are not responsible for issues arising from custom CSS / files modifications made to the website’s original configuration. In this instance, the problem is due to the incorrectly written custom CSS for the Mobile Menu element.

As a potential solution, we recommend temporarily removing the custom CSS associated with the Mobile Menu element to verify if this resolves the issue. This step will help determine if the custom CSS is indeed the cause of the problem.

Should you require further assistance or have any questions, please do not hesitate to contact us.

Best Regards,
Jack Richardson
The 8Theme Team

Dear @kmc,

We are pleased to inform you that we have made improvements to the custom CSS previously provided, which can be reviewed at this link: https://prnt.sc/6IgQYqKIvcBN. The updated CSS now correctly styles the dropdown typography for the Main Menu, as illustrated here: https://prnt.sc/UzHzw2C_FbfU.

We kindly ask you to review the modifications at your earliest convenience and share your feedback.

Best Regards,
Jack Richardson
The 8Theme Team

Dear @kmc,

We hope this message finds you well.

If you would like to globally reduce the padding for the mega menu items, you may use the following CSS code snippet:

.etheme-elementor-nav-menu--dropdown.etheme-elementor-nav-menu--dropdown-mega {
    padding: 5px 10px;
}

For guidance on the appropriate placement of custom CSS, please refer to the following documentation:
https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/

Best regards,
The 8Theme Team

Dear @kmc,

Thank you for reaching out.

Kindly provide us with the correct website URL in the private area, as we are unable to reproduce the issue on the website linked in this topic.

Best regards,
Jack Richardson
The 8Theme Team

Dear @kmc,

In this case, you may consider adding the following custom CSS snippet. However, please note that some menu settings—such as dropdown animations, offsets, and similar features—may not function as expected after applying this snippet, as these features are hardcoded:

body .etheme-elementor-menu .item-design-mega-menu, 
body .etheme-elementor-menu .nav-sublist-dropdown ul > li.item-design-mega-menu {
    position: relative;
}

body .etheme-elementor-nav-menu--dropdown {
    --menu-main-sublist-offset-left: 50%;
    --dropdown-animation-name: none;
    transform: translateX(-50%);
}

You can view the result in the following video: https://gyazo.com/f2aa249e5b7fad83df6df7313e6d0238

More information about adding custom CSS you can find in our documentation article -> https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/

Best regards,
Jack Richardson
The 8Theme Team

Dear @kmc,

Thank you for your message.

In your example, the mega menu dropdown is aligned to the left side relative to the parent menu item. If you would like to achieve the same alignment on your website, you may use the following code snippet:

body .etheme-elementor-menu .item-design-mega-menu, 
body .etheme-elementor-menu .nav-sublist-dropdown ul > li.item-design-mega-menu {
    position: relative;
}

body .etheme-elementor-nav-menu--dropdown {
    --menu-main-sublist-offset-left: 0%;
    --dropdown-animation-name: none;
}

Please feel free to reach out if you need any further assistance.

Best regards,
The 8Theme Team

Hello @kmc
Please, check the screenshot -> https://prnt.sc/HLBTSj8x5hYe.
If you need any assistance, please, provide us the actual web-site URL (in private area)
Kind regards, Jack Richardson
The 8theme’s team

Dear @kmc,

We hope this message finds you well.

The hover effect for the menu items under the “Furniture” section has been implemented by adding custom CSS to the inner section, as shown in the following screenshot: https://prnt.sc/iYnz3gdsEJL7. Specifically, we added the following improved CSS snippet (https://prnt.sc/aClJmffKFzuW):

selector .item-design-dropdown .etheme-elementor-nav-menu-item .elementor-item {
    flex: 0 0 auto;
}
selector .item-design-dropdown .nav-sublist-dropdown .etheme-elementor-nav-menu-item .elementor-item:after {
    content: '';
    position: absolute;
    left: var(--menu-sublist-padding-left, 0.9em);
    bottom: var(--menu-sublist-padding-bottom, 0.5em);
    right: var(--menu-sublist-padding-right, 0.9em);
    width: 0%;
    background: currentColor;
    height: 1px;
    transition: all .3s linear;
    opacity: 1;
}

selector .item-design-dropdown .nav-sublist-dropdown .etheme-elementor-nav-menu-item:hover .elementor-item:after {
    width: calc(100% - var(--menu-sublist-padding-left, 0.9em) - var(--menu-sublist-padding-right, 0.9em));
    left: var(--menu-sublist-padding-left, 0.9em);
    right: auto;
}

Result -> https://gyazo.com/75786b8c99efa06b64cf58c4b76bdb1a.

Kindly check the result at your convenience and let us know if any further adjustments are needed.

Best regards,
Jack Richardson
The 8Theme Team

Hello @kmc
We don’t see such issue -> https://gyazo.com/ff2a4ca1c2d5303ca43123fe7b6c1553. Could you please, check from another browser and provide us the details of device and browser you are testing from.
Kind regards, Jack Richardson
The 8theme’s team