Change text color on mobile

Activello
1

Hi,

The text color on the dropdown menu is a very light grey and it’s really hard to read.
How can I change the color just for the mobile version? It’s good when I see it on my laptop (black text), but hard to read on mobile (light grey).

Thanks

2

Hey there,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*chang drop down menu color on mobile*/
@media (max-width: 768px){
	.dropdown-menu> li> a{
  color:black !important;
}
}

Best regards,
Support.

3

Thank you so much. That worked!
Question:
Should I leave it “open” without the } at the end?

It’s working the way it is, but I’m just wondering if I should add that, for compatibility purposes or something.

Thanks again!

4

Sorry, I just found another thing that’s happening, now on my laptop.
So I have some menu buttons that are Custom Links where I use # so they don’t go anywhere and then I have the sub menu items. If I hover over the main button (the custom link with the #) the sub menu text is black as expected, but if for some reason I click the main button, the sub menu text becomes grey. How can I change this, using the same CSS technique?

Thank you so much!

5

Hey there

Hope you are well today and thank you for your question.

@tiagorocha can i see your website to see this live? please provide url of your website

6

Sure:
www.iam3ple.com
Thank you

7

Hey @tiagorocha,

Hey there,

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*sub menu stays black on click*/
.navbar-default .navbar-nav .open .dropdown-menu> li> a {
    color: black;
}

Best regards,
Support.

8

That didn’t change it… I don’t know if it’s because I have an older version of the theme or because I changed and added CSS.

I’m sending the code from the CSS file (I think I made some changes to it) and the code on the Additional CSS section.

Thanks

9

Hi there

Please try this code, it should work

.navbar-default .navbar-nav .open .dropdown-menu> li> a {
color: #000000 !important;
}

10

It worked, thanks!

What I noticed was that I was pasting the first code you sent me, after the code for the mobile and I think the code was not “closed” (that was actually one of my questions, because I didn’t see a } to close the code for the mobile).
So I guess it wasn’t accepting it as a new code.
So my question is again, is the code for the mobile complete? Do I have to add any extra } at the end? Because I see 2 {, but no } at the end.

/*chang drop down menu color on mobile*/
@media (max-width: 768px){
	.dropdown-menu> li> a{
  color:black !important;

Let me know.
And thanks again for the precious help!

11

Hey there

Sorry, when we use special wrapper for code part of this element covers code :frowning: we will fix this soon, This is complete code without code wrapper

/change drop down menu color on mobile/
@media (max-width: 768px){
.dropdown-menu> li> a{ color:black !important;}
}

Let me know if your question was answered :slight_smile:

12

Yeah I noticed that the code was kinda cut.
Thanks for clarifying and sending the full code.
And yes it works, even when I put the other code after the mobile code.
Much appreciated!

13

Hi there

nice to hear :slight_smile:

Is there anything else or can i close this ticket?

14

That’s all for now. Thank you again. Really helpful. You can close the ticket! :slight_smile:

15

Nice, to hear your problem is fixed:)
Now I will now close the topic and mark it as resolved. Feel free to contact us again Thanks!