CSS Selectors For Layered Navigation Cornerstone

[IPProduction]

Hi there,

Webpage I am working on is: https://soundcontrolte.wpengine.com/solution-finder/ and I have a few things I’m looking to do. Right now, there can be up to 4 layers for each outer navigation menu. I would like to give each layer a different style, but I am having trouble figuring out the correct selectors for each layer.

For example, if I have the following code (#sf-menu-camera is my ID for the nav menu, .sf-outer is my class for the outer menu item):
#sf-menu-camera .sf-outer .x-anchor-text {
display: none;
}

It hides all of the text in the following layers. Any ideas?

Thanks!

[marc_a]

Hi @IPProduction,

Thanks for reaching out.

The reason why it hides all the text because display: none CSS code will hide everything when you call it. In order for you to get the proper CSS selector, please learn how to Inspect Element.

Hope that helps.

Thank you.

[IPProduction]

Hi there, thanks for the reply. I understand how to inspect and find different selectors, but the problem is they all seem to be wrapped in .x-anchor-text. I just want to hide the text for the outermost level of the menu without affecting anything else.

[marc_a]

Hi @IPProduction,

Proving a screenshot of what you are trying to hide is a great help so that we can better help you with your issue.

Thank you.