If you add code that references the "nth" element, it can be difficult to maintain the code, especially when the content is dynamic - in this case due to the language switching.
Instead, you can reference the url of those external links, like this:
/* Change color of language links */
.header-nav-item.header-nav-item--external a[href="/english"], .header-nav-item.header-nav-item--external a[href="/en/nederlands"], {
color: red;
}
This will only affect the desktop navigation. If you want to set an alternative colour for the mobile navigation, you'll want to add some CSS for this too. For example:
/* Language links on mobile nav */
.header-menu .header-menu-nav a[href="/english"], .header-menu .header-menu-nav a[href="/en/nederlands"] {
color: white!important;
}
Did this help? Please give feedback by clicking an icon below ⬇️
arie reacted to tuanphan in have a floating button but cannot find the code :) + button on index page - york template
arie got a reaction from paul2009 in change color on navigation in bi-langual site
arie got a reaction from Ziggy in different announcement bar on certain pages
