Change color desktop menu items when hovered or selected - Support

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
October 9, 2019 at 9:50 am #1146440

YourChoice Informatik GmbH
Participant

Hi
We want to change the color ot the desktop menu items for hover and when they are selected to red.
It is needed on the website mentioned in the private content.
When we change the “Logo Area Schriftfarbe” to red (#be1717) it works fine on desktops, the hovered and selected items are red. But then, in the mobile menu, the whole menu is red and when we select an item, the color and background-color is also read, so nothing is readable.
Which color we have to change, for that it is red on hover or selection but only on desktop menu? Or do I have to do that with css?
Thanks very much.
Best regards
Mike

October 10, 2019 at 4:00 am #1146720

Rikard
Keymaster

Hey Michael,

Thanks for the login details. I can’t reproduce the problem you are describing on my end using Chrome, could you post a screenshot of it and let us know in which browser/device you are seeing it in please?

Best regards,
Rikard

October 11, 2019 at 12:48 pm #1147103

YourChoice Informatik GmbH
Participant

So, when you log in, set the “Logo Area Schriftfarbe” to #be1717, then the color of the menu is in red, when you hover or when it is active. That’s fine and works in all browser (I also use Chrome).

But then, wenn you look the website on a smartphone with the mobile menu, all entries in the mobile menu are red and when you select one you can’t read the text anymore. The problem is only on the mobile menu.
So, perhaps the solution is, to change this “Logo Area Schriftfarbe” only on desktop menu to #be1717?
Best regards
Mike

October 11, 2019 at 12:53 pm #1147107

YourChoice Informatik GmbH
Participant

Or in other words, which color setting we have to change, for that the hover and active menu color changes, but only on desktop menu?

October 12, 2019 at 10:11 pm #1147453
Mike
Moderator
Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
@media only screen and (min-width: 989px) { 
.header_color .sub_menu>ul>li>a, .header_color .sub_menu>div>ul>li>a, .header_color .main_menu ul:first-child > li > a, #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a, #top .header_color .sub_menu li ul a {
    color: #be1717 !important; 
}
}
```
this will apply the color to only desktop menus

Best regards,
Mike
October 13, 2019 at 9:06 pm #1147615

YourChoice Informatik GmbH
Participant

Hi Mike
Thanks for the code. With this, all menu items are red. But only the hovered and the active menu items should be red. How the code should look like, for having this effect?

October 13, 2019 at 9:22 pm #1147620
Mike
Moderator
Hi,
Thank you for the feedback, I adjusted the css to this:
```
@media only screen and (min-width: 989px) { 
.header_color .sub_menu>ul>li>a, .header_color .sub_menu>div>ul>li>a:hover, .header_color .main_menu ul:first-child > li > a:hover, #top .header_color .main_menu .menu ul .current_page_item > a:hover, #top .header_color .main_menu .menu ul .current-menu-item > a:hover, #top .header_color .sub_menu li ul a:hover {
    color: #be1717 !important; 
}
}
```
Please clear your browser cache and check.

Best regards,
Mike
October 13, 2019 at 9:29 pm #1147623

YourChoice Informatik GmbH
Participant

Hi Mike
Almost. Now, the hovered menu is red. Also the active menu should be red, then it’s perfect ;-)

Best Regards
Mike

October 13, 2019 at 9:36 pm #1147628

Mike
Moderator

Hi,
Sorry, I’m confused, above you wrote that the hovered menu should be red?
Is this for the desktop menu only? Is the hover of the sub-menus ok, they are red with black text.

Best regards,
Mike

October 13, 2019 at 9:44 pm #1147629

YourChoice Informatik GmbH
Participant

Hi Mike

Yes, the hovered menu should be red. With your last code this works.

But then, when I select a menu entry, for example “Dienstleistungen”, this should also be red, when it’s active.

And yes, only for desktops.

For me the submenu hover is ok, perhaps white text would be better, when this is easy to change, only for desktops ;-)

Best regards
Mike

October 13, 2019 at 10:36 pm #1147633

Mike
Moderator

Hi,
Thank you for the feedback, I adjusted this at Enfold Theme Options > Advanced Styling

Please clear your browser cache and check.

Best regards,
Mike

October 13, 2019 at 10:43 pm #1147634
YourChoice Informatik GmbH
Participant
Hi Mike
Cool! Now it works!
But this code is still needed?
```
@media only screen and (min-width: 989px) { 
.header_color .sub_menu>ul>li>a, .header_color .sub_menu>div>ul>li>a:hover, .header_color .main_menu ul:first-child > li > a:hover, #top .header_color .main_menu .menu ul .current_page_item > a:hover, #top .header_color .main_menu .menu ul .current-menu-item > a:hover, #top .header_color .sub_menu li ul a:hover {
    color: #be1717 !important; 
}
}
```
October 14, 2019 at 12:04 am #1147648

Mike
Moderator

Hi,
Glad to hear, I believe you can try removing the css and then also check the other checkbox above the one the arrow points to for hover state.

Best regards,
Mike

October 14, 2019 at 7:10 am #1147730

YourChoice Informatik GmbH
Participant

Hi Mike
Didn’t work. So I think I let both there, the code and this setting. Or do you have another idea?
Regards
Mike

October 15, 2019 at 3:30 am #1147929

Mike
Moderator

Hi,
If it is working with both the code and setting then that will be fine.

Best regards,
Mike

October 15, 2019 at 9:51 am #1148012

YourChoice Informatik GmbH
Participant

Hi Mike
Yes. You can close this issue.
Tank you very much for support.
Best regards
Mike

October 16, 2019 at 6:28 am #1148309

Rikard
Keymaster

Hi Mike,

Thanks for letting us know, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Change color desktop menu items when hovered or selected’ is closed to new replies.