I've been searching extensively for a solution to this issue. I'm trying to make the menu item DE appear bold when entering the site, and if I click on EN, I want DE to return to normal (thin) font while EN becomes bold.
You can find the site here:
So far, I've only been able to make the current-menu-item class appear in bold using CSS, but that doesn't cover the initial page load scenario.
I attempted some Javascript solutions, but I'm not entirely confident in my ability to make it work.
Unfortunately, I'm still unable to get it to work. In my JavaScript code, this is what I currently have:
jQuery(document).ready(function($)
{
jQuery(document).on("click", ".menu-language", function(){
var lang = jQuery(this).text();
sessionStorage.setItem("language", lang);
});
var language = sessionStorage.getItem("language") ?? 'DE';
if(language != null) {
jQuery(".lang-" + language).css({"font-weight": "bold"})
}
});
The issue now is that I need to click twice on DE or EN for it to become bold. Any suggestions on how to resolve this? Also, DE isn't bold by default upon page load.