I have "buttons", which change language on the web-page:
<div class="wrapper">
<a class="button-link" href= "<?php echo qtrans_convertURL(get_permalink(), 'de'); ?>" target="_parent">DE</a>
<a class="button-link" href="<?php echo qtrans_convertURL(get_permalink(), 'en'); ?>" target="_parent">EN</a>
</div>
And I make a hover effect, to show, which language is about to be chosen:
.button-link:hover {
color: #fff;
border-bottom: 2px solid #e95252;
}
Now I am trying to keep this border line under the chosen language. So that the user always sees the active language. I thought it would be as simple as:
.button-link:active{}
But it doesn't work the way I want it, so I guess I have to write a php function. I have found examples of how to show the current page, but it is not the same as with the languages. Because the language button is independent of the page, it should always stay underlined if a person has chosen English, for example.
You can try doing the following PHP:
<?php if(qtrans_getLanguage()=='de'): ?>
<a class="button-link active" href= "<?php echo qtrans_convertURL(get_permalink(), 'de'); ?>"
target="_parent">DE</a>
<?php endif; ?>
CSS:
.active {
border-bottom: 2px solid #e95252;
}
Good Luck!