Main menu colors in desktop and mobile version

Hello,

First thanks for the great support you are providing for the activello theme.

I have a problem regarding the colours of the visited menu in the main navigation menu. In my site, the main menu contains 4 parts (home, about, products, contact). Every time I click the home menu the products menu changes the colour alone to the visited colour although I did not touch it. This does not happen for the two other parts (about, contact). The main difference is that the products menu has sub-menus so it might be the reason.

for info, I have changed the colours using custom CSS.

I am not sure either it is a problem or I am not understanding well how the colours change in the main menu.

Thanks in advance for the help

Bests

Hey there,
Hope you’re doing well today

That’s weird.

Please provide me with a link to your site so that I may have a closer look.

For now, I’m also going to ask that you disable your plugins and see if the issue persists. If it doesn’t, just re-enable your plugins one by one and check when enabling to see which plugin caused the issue.

Also, what browser are you using? I’m going to need to know this so that I can try as best as possible to replicate the issue you’re having.

I look forward to your reply :slight_smile:

Best Regards,
Support

Hello support,

Thanks for the reply.

Here is the link to my site: www.tuniport.com

Bests

Hey there,
Thanks for keeping in touch with us.

For some weird reason, the Products menu item is setting itself to active, but it’s inactive.

Do you have a page assigned to the Products menu item? If not, then that’s probably the reason.

Here is a quick way to fix this. Just add and save the following CSS to Appearance > Customize > Additional CSS:

.home li#menu-item-191 a {
    color: white!Important;
}

That’ll basically ensure that the Products menu item is never set to active when you’re on the homepage.

I hope this helps.

Best Regards,
Support

Hi support,

That’s right. I linked the product page to an empty custom link and that solved the problem.

One more problem regarding the main drop down menu of the mobile version. As the text color is white, some of the text does not appear. Is it possible to change the text color of the main drop down menu to black just for the mobile versions and leave it white in the desktop version?

Thank you

You can achieve this by using the below custom CSS code.

@media (max-width: 767px){
.navbar-default .navbar-nav > li> a {color: #1c202a;}
}

Dear movin,

It works well. Thanks a lot!

All the best

You are most welcome here :slight_smile: