Return to previous page

How to change mobile menu background color

This topic has 9 replies, 4 voices, and was last updated 10 months, 2 weeks ago ago by Luca Rossi

Hanzla Nadeem

Participant

January 5, 2024 at 15:56

I have tried to change the background color of mobile menu by adding the following code
.et-mini-content {
background-color: green!important;
}
the bg color changes but with that the background color of quick view canvas also changes to green. can you please provide me with the code with changes only the bg color of mobile menu without effecting other mini contents

https://imgur.com/a/GjGzdsN

#378766 Copied Theme version: 9.2

8 Answers
lee

Participant

January 6, 2024 at 01:41
Hi, I’m not 8theme support but:
1. You don’t need code, go to Header Builder > Account > and find ‘Background Color’ in DROPDOWN part.

Custom css is uncesssery but I’m pretty sure this would work:
```
.et_b_header-account.et_element-top-level .et-mini-content {
background-color: green;
}
```
#378822 Copied
Tony Rodriguez

Support staff

January 6, 2024 at 08:23

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

#378837 Copied

Hanzla Nadeem

Participant

January 6, 2024 at 09:32

thanks for your response. I have followed your instructions but I am unable to do so. I think that the there is some custom code clashing and overwriting this but I am now unable to find the code from whole custom css code. So can you please help me in that

#378843 Copied

Tony Rodriguez

Support staff

January 6, 2024 at 14:11

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

#378872 Copied

Hanzla Nadeem

Participant

January 6, 2024 at 19:25

Actually I am student and doing it all my self without having knowledge of such thing and I cannot afford a website developer. just trial and testing the codes to get some better results. I would be glad if you can help me. thank you

#378889 Copied
Luca Rossi

Support staff

January 8, 2024 at 08:06
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
#378998 Copied
Hanzla Nadeem

Participant

January 8, 2024 at 10:44

thanks a lot!

#379029 Copied

Luca Rossi

Support staff

January 8, 2024 at 10:50

You’re most welcome!

Glad we’re able to help.

Best regards,
The 8Theme Team

#379031 Copied
Tagged: change mobile menu color, customize woocommerce mobile menu, mobile menu background color, woocommerce theme customization, wordpress menu color change, wordpress woocommerce themes
Viewing 9 results - 1 through 9 (of 9 total)