Mobile Menu Submenu Background Color

Illdy
1

Hello,
Thank you for providing such a flexible theme - my client loves Illdy too. I am having difficulty finding code to change the yellow accent color from appearing in the mobile menu submenu items. I would like to make it white, not yellow I can change the accent color in the colors section, but only want to do it for this mobile sub menu. Additionally, I would like to make the entire mobile menu text left justified, and make the submenu items indented. Is that possible?

Thank you in advance! Website is https://criticalmasssolar.com

2

hey there

Looks like you make some changes already because menu bg color is not yellow but its grey, is that ok for you?

3

Hi Noda - I changed the menu bg color to grey as a temporary fix. I do still need to know how to change the color of just the mobile submenu as well as its text alignment. Thank you,

4

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the menu colors by going to Appearance > Customize > Additional CSS and pasting it there.


@media only screen and (max-width: 992px){
.responsive-menu ul li a {
    color: #000;
    text-align: left;
    background-color: blue;
}
}

Best Regards,
Support

5

The alignment and background color change worked. But now I can’t see the submenu text :slight_smile: What needs to change to make it black like the rest? Thank you!

6

hi there

remove this line of the code:

color: #000;

7

Hi Noda - I removed that line but there was no change. The submenu text is still white. There must be another special CSS for those links.

8

Thanks for this great post. This is really helpful for me. Also, see Best instant meat thermometer

9

Hello there,

This CSS should allow you to control that color:


@media only screen and (max-width: 992px)
{
.header-front-page nav ul.sub-menu li a {
    color: #000 !important;
}
}

Best Regards,
Support

10

That last snippet worked perfectly! I was able to make the mobile menu look exactly how I wanted. I tried using margin-left: 15px to indent the menu but it make the accent yellow appear again. So I just used arrows instead.

11

Hello there,

Nice work, is there anything else that we can help you with?

Best Regards,
Support

12

Yes there is one more thing to adjust if I can ask. After adding the arrows to show indent for the mobile menu, I now have desktop menu links that wrap to a second line. How do I control the width of the submenu? Thanks!

13

Hi there,
Thanks for writing back.
Unfortunately I’m not in a position to access your site as it currently stands. It seems to render only a dark background. Could you kindly check into it so that we can have a look into this.

I look forward to your reply.
Best Regards,
Support.