Header Top Bar & Menu

@themegrillteam I almost forgot about this! Would you be willing to study this problem or is it too much work? I understand this “problem” is not exactly the most important

The live website is https://bit.ly/2O3jd6m

I want to fix as stated in the first post, the menus and sub menus colors.
When I hover the sub and sub-sub menus the text color changes to light green(thats absolutely fine) and the background changes to gray, what I want now is that they stay active if I am on that page and/or category. For exemple: If I go to Prodcuts -> Insulation -> Cork I want Insulation and Cork to be gray background and green text while I am in those pages. Was I clear enough?

Hope you can help me one more time and hopefully the last one because I am a pain in the..
Thank you!

Hi,
Please add this CSS :

.tg-primary-menu>div ul ul li.current-menu-item,
.tg-primary-menu>div ul ul li.current-menu-ancestor {
  background-color: #d6d6d6;
  color: #a6ce38;
}

Also, have you tried changing the active menu item color from the Customizer? If you change it, it should work as you wanted.

Thanks.

@themegrillteam I started this support because when I change the active menu item color to the one I want(#a6ce38), if I am on the /products page, the text color blends with the background because it is the same color.

The code you provided applies the gray background but not the green color to the active text. (thats fine)

When I hover Insulation->Others, the word “Others” stays green, is it possible to make it so the category itself (“Insulation”) and the word “others” stays green while hovering aswell?

Thank you.

Hi,
Please replace previous code with this:

.tg-primary-menu>div ul ul li.current-menu-item a,
.tg-primary-menu>div ul ul li.current-menu-ancestor a {
    background-color: #d6d6d6;
    color: #a6ce38;
}

.tg-primary-menu > div ul li ul li:hover > a {
    color: #a6ce38;
}

I’m not sure if I fully understand the issue, if this doesn’t work, please let me know. ??

@themegrillteam
That is the effect I want but only on the active page, not all.

There was a small issue in the previous code, please replace that with this one:

.tg-primary-menu>div ul ul li.current-menu-item > a,
.tg-primary-menu>div ul ul li.current-menu-ancestor > a {
    background-color: #d6d6d6;
    color: #a6ce38;
}

.tg-primary-menu > div ul li ul li:hover > a {
    color: #a6ce38;
}

@themegrillteam
Perfect ?? thank you so much !

@themegrillteam – following the above I still have the question how to change the font color of the (primary) menu I have set for the Header Top Bar.
I need it in white and green (#04b45f, hover and selected) in order to contrast to the dark top bar background, on https://test.marucloud.de.

As I’m still a beginner, where do I add any CSS changes as you indicated?

Hi, @marucloud,
You can add the CSS inside Appearance > Customize > Additional CSS. If you still got trouble finding it, let me know again. ??

For changing menu color on Header top, please add this CSS at the above mentioned box:

.tg-site-header-top ul li a {
    color: #fff;
}

.tg-site-header-top ul li a:hover {
    color: #04b45f;
}

Thanks.

Terrific, thankyou so much!

@marucloud
Glad I could help ??