Customization submenu font color tablet and phone

Support
#1

Hello team,

So I have two pages of my site that have different looks from the rest of my site:


and

The menus and sub(sub)menus look good for both on desktop, but they have the standard brown color on tablet and phone and I am not managing to arrive to the proper css to use, could you please help me out?

What I have now for both pages:

.page-id-4485 .sub-menu a {
color: hsl(260, 60%, 20%) !important;
}

.page-id-3208 .sub-menu a {
color: hsl(180, 80%, 20%)!important;
}

Thank you for the help!

#2

Hello Mitica,

Please try this instead:

.page-id-4485 .x-navbar .mobile .x-nav li > a {
    color: hsl(260, 60%, 20%);
}
.page-id-3208 .x-navbar .mobile .x-nav li > a {
    color: hsl(180, 80%, 20%);
}

No need to use important if we are using correct selector. The following might help:

#3

That worked like a charm. Thank you!

#4

One more thing though regarding the links you shared:
I have been trying to get css collectors using the guidance in your second link, but that is not working at all. For example, how would I get the right selector to get the submenu with these instructions? Am I correct that this method can work with very simple pages, but that it is not very practical for the example I needed the selectors for?

#5

Hi Mitica,

The suggestions in that link are slightly advanced.

I suggest learning first the basics about CSS Selectors so that you will know how to target an element by writing the CSS selector.

Here is another link:

https://www.w3schools.com/cssref/css_selectors.asp

Hope this helps.

#6

Thank you!

#7

You are most welcome. :slight_smile:

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.