Logo hover effect and menu adjustments

Hi Enfold team,

Tweaking the header of my Enfold website I encountered these three detail questions:

1)
With this code from the Enfold forum, I added a hover effect for the logo on my website:

.logo:hover {
background: url(‘path_to_images/logo_hover.png’);
background-size: 171px 130px;
background-repeat: no-repeat;
background-position: 0% 50%;
}

.logo:hover img {
opacity: 0;
}

This works fine on rollover, but on rollout the logo flickers. How can I have here a smooth transition too?

2)
On the german starting page of my website (= “Projekte”) the corresponding menu entry “Projekte” should be marked as active (color #808080 + blue bar at the bottom of the header section), but it isn’t. When selecting the same page on the english version of the website (= “Work”), the menu is displayed correctly. How can I adjust this?

3)
Is it possible to display the blue bar at the bottom of the header section (like on every other menu entry) also when rolling over the magnifier icon (= search function)?

Best regards,
Till.