How to change mobile menu background color

Hello, @Hanzla Nadeem,

Understand that you have attempted to modify the background color of the mobile menu using custom code, encountering an unintended side effect on the background color of the quick view canvas. Allow me to provide you with a more effective solution that leverages the built-in functionalities of the XStore theme.

To customize the background color of the mobile menu without affecting other mini contents, you can utilize the theme’s intuitive settings. Here’s a step-by-step guide:

a)Navigate to your WordPress dashboard.
b)Go to “XStore”.
c)Select “Theme Settings.”
d)Click on “Header Builder.”

Within the Header Builder section, locate the specific customization option for the Mobile Menu background color. Typically, you can find this under the “Mobile Menu” settings.

Once you are in the Mobile Menu settings, scroll to the “WCAG Background Control” option. From there, you can easily change the background color of the mobile menu to your desired shade without requiring any custom code.

For your convenience, we have attached a visual reference in the provided image link https://imgur.com/a/QJiaSkh

Kind Regards,
8theme team

Hello, @Hanzla Nadeem,

Thank you for reaching out and providing detailed information about the challenges you’ve encountered. We appreciate your efforts in following our instructions.

Upon further investigation, it appears that the issue is not related to any custom CSS conflicting with the code. Instead, it seems to be associated with the Child theme. To confirm this, we temporarily activated the parent theme and made adjustments to the mobile menu background color. The changes were applied successfully, indicating that the parent theme is functioning as expected.

Please refer to the attached visual reference in the provided image link: https://imgur.com/a/wdtlPmE -This demonstrates the correct behavior when using the parent theme.

As our responsibility extends only to the parent theme, we recommend reaching out to your website developer to manage the Child theme. They will be better equipped to identify and address any specific custom code that may be causing conflicts or overwriting settings.

If you have any further questions or need additional assistance with the parent theme, please feel free to let us know. We are here to help within the scope of our support.

Thank you for your understanding and cooperation.

Kind Regards,
8theme team

Dear Hanzla Nadeem,

We hope this message finds you well.

We’re writing to inform you that the issue you were experiencing should now be resolved.

Within the ‘Customize > Additional CSS’ section of your website, the following custom CSS code was previously active:

.et-mini-content {
    text-transform: none;
    text-align: start;
    color: var(--et_dark-2-white);
    background-color: #f6e2dc!important;
    top: 100%;
    position: absolute;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
}

This code was causing an override of the mobile background color setting in your theme options.

To rectify this, we have commented out the specific line of code responsible for the override:

/* background-color: #f6e2dc!important; */

With this adjustment, the theme option for the mobile background color should now function as intended.

Should you require any further assistance or have additional questions, please do not hesitate to reach out.

Kind Regards,
The 8theme Team

You’re most welcome!

Glad we’re able to help.

Best regards,
The 8Theme Team