Archived topic
CSS Select a Hook Element in
6 replies · Started by twarrior on March 18, 2023
Hello,
We have a Block - Hook in generate_after_primary_menu
The content of the block is created by a language plugin
<a href="#" class="nturl notranslate es Spanish single-language flag" title="Spanish" data-lang="Spanish">Cas</a>
To change the link properties we use:
a.single-language {
font-size: small;
font-weight: 300;
color: #222;
}up to here everything is fine, BUT...
We also use a Header element "Merged with Content" in homepage, and another in pages.
We need the link color of a.single-language to white in the navigation of this header elements. (see images)
how can we apply a different style to this link when it is in the Header element "Merged with Content", from when it is in the normal navigation menu or in the sticky menu?
Thanks
Sorry, i add the website url
Hi there,
the Merge with Content options wraps your site header in a div with the class of header-wrap
So you can add that to your CSS selector when you want to target an element inside it eg.
.header-wrap a.single-language {
color: #fff;
}Thanks for your reply David. That was one of the options we tried, but it doesn't work well.
That code makes the link also come out white in the "sticky navigation".
Ah ok, try this:
.header-wrap nav:not(.is_stuck) a.single-language {
color: #fff;
}So this will target that link if it is inside the nav element that has NOT got the is_stuck class ( which gets added when sticky ) that is inside the header-wrap :)
Tested. Works ok. Thank you very much
Glad to hear that !
