Header Builder - Sub Indicator Animation

[srundle]

I would like the sub-indicator graphic on my menu to flip on y-axis when hovering and the submenu drops down.

Thanks,

Sean

[kory]

Howdy, @srundle!

Thanks for writing in! For navigation elements in Pro, none of the sub-indicators are animatable in the way that the link item graphics are. This is intentional for many reasons, but you can certainly include any sort of additional CSS you wish for your menus either via the code editors in the tool or a child theme if you have one set up.

Cheers!

[srundle]

Kory,

Thanks, I am trying to use the following CSS, to switch the carrot down to carrot up on hover. Not sure if that is the correct CSS. Any help would be appreciated.

.x-anchor-sub-indicator:hover span:after {
  content: "\f0d8" !important; 
}

[kory]

Hey @srundle,

Sure thing! The issue with that selector is that you’re only targeting the indicator when it is being directly hovered over, which will not yield consistent feedback for users. Additionally, there is no <span> element inside the sub indicator element, so nothing is getting targeted at all in this particular case (also, it uses the :before pseudo element, not :after). Inspecting the element directly with your browser’s developer tools will inform you what selectors you need to use for your CSS to affect an element.

Instead, you may want to try something like the following:

.x-anchor-menu-item:hover .x-anchor-sub-indicator {
  /* place styles here */
}

Keep in mind, this will target all sub indicators in all anchors in use on your site, so this may be a bit too global for your needs if you have multiple menus. Also, the specificity of this selector will likely not be high enough to overwrite some of Pro’s generated styling, so you would either need to append !important to everything (not a best practice, but will get the job done), or you’ll need to copy the chain of selectors for the element you’re targeting from your browser’s developer tools to ensure a proper cascade of styles (I cannot tell you what this would be as it is different depending on the number and order of elements used). If you need to target the pseudo element in use, that would be:

.x-anchor-menu-item:hover .x-anchor-sub-indicator:before {
  /* place styles here */
}

Another piece of functionality you could tap into would be to use the .x-active and .x-interactive classes that get added to these items on certain events. Essentially, these are added via JavaScript to determine more than just hovering. They will also determine a specific form of keyboard focusing. You can inspect the anchor with your developer tools to see when these are applied to determine what might work best for your needs. Using these would look something like:

.x-anchor-menu-item.x-interactive .x-anchor-sub-indicator {
  /* place styles here */
}

Hopefully that points you in the right direction. Cheers!