Active Menu Item Color when dropdown

Support
#1

I have changed the menu item colors, but how do I change it when the dropdown menu items are displayed?

#2

Hi @bobbyoliveri,

If you are using the Pro header builder and the Navigation Inline element, you need to enable the Current Link and ancestor Link options:

If you are using X or another Pro header method I’d appreciate it if you get back to us with the URL of your website and the details on which menu item you want to change.

Thank you.

#3

I am not using the pro builder for this menu. The url is vehiclesforchrist.mysites.io, see the about us menu item.

#4

Hello @bobbyoliveri,

With the default header, the menu item link color and hover link colors can be set in Pro > Theme Options > Header > Links - Text and select the “Navbar Links” and the “Navbar links Hover”.

Other links can be set in Pro > Theme Options > Typography > Site Links.

Hope this helps.

#5

Thanks. Because I Loaded a demo at first, theres some Global CSS set as well. Will any of that override those settings?

#6

Hi @bobbyoliveri,

Usually, the demo will not use custom CSS if settings is available on Theme Options. Although there might be exceptional cases. To check the element current CSS styles, you can use Chrome developer tools. Using that tool, you can see the hierarchy of styles added to certain element and where the CSS is located.

Hope this helps.

#7

The site links color is correct, the blue color that they are normally. Here is what is happening, maybe you could give me a clue where to look? It seems only to be when the dropdown menu is activated.

#8

Hello @bobbyoliveri,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings and investigate further hat is causing this issue. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Best Regards.

#9

Sure, here you go.

#10

Hi @bobbyoliveri,

I am not exactly sure what is your expectation here but I found this custom CSS on Theme Options > Global CSS about the navigation:

/*
// Navigation.
*/

.x-slider-container.above,
.x-slider-container.below {
  border: 0;
}

.x-navbar {
  border-color: transparent;
  background-color: #f2f2f2;
}

.x-navbar .desktop .x-nav > x-active > a > span {
    color: rgba(28, 71, 148, .75);
}

.x-navbar .desktop .x-nav > li > a:hover > span,
.x-navbar .desktop .x-nav > x-active > a > span,
.x-navbar .desktop .sub-menu > li > a > span,
.x-navbar .desktop .x-nav > .current-menu-item > a > span {
  color: rgba(28, 71, 148, .75);
  border-color: rgba(28, 71, 148, 0.25);
  
}


.x-navbar .desktop .x-nav > li.menu-item-fill > a > span {
  color: #ffffff;
  border-color: transparent; 
  background-color: rgb(28, 71, 148);
}

.x-btn-navbar {
  text-shadow: none;
}

.x-navbar .mobile .x-nav li > a {
  border-color: rgba(28, 71, 148, 0.25);
}

That affects the looks of the links.

#11

Yes, these were added when I installed a template. But changing these doesn’t seem to solve the issue i’m having, which is when the ‘about us’ menu item is activated but not hovered over, it is white or (see video above).

#12

Hey @bobbyoliveri,

The white color is coming from the Navbar Links Hover option in Theme Options > Header

image

Changing that color would resolve your issue.

image
image869×500 32.2 KB

Hope that helps.

#13

Perfect thank you! I wasnt sure what exactly was happening or controlling that.

#14

You are most welcome!

#15

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