Moving the search form function in high headers


I’m currently using the wonderful Shapely theme on my website .
As my logo is quite big, the header results in being higher than in the default theme.
Hence, the search function appears and flashes in and out when mouse floats on the upper-right part of the heading.

I was wondering if there is any way to hide the function, for example using simple css property transform: translateY(X%), without also affecting the position of the search form when visible.
I’ve tried some solutions but I couldn’t achieve any nice result, so here am I…

Thank you for the wonderful theme and support!

hey there

Hope you are having a good day and thank you for your question :slight_smile:

Please add this CSS in appearance - customize - additional CSS

.widget-handle .function {
visibility: hidden;

Colorlib Support Team

Thank you very much for the help!

In this way the headbar looks better.
However, the problem still occurs after someone clicks on the search lens and then the mouse slides on the upper part of the headbar. Is there any simple way to get rid also of this?



Im sorry, I tried several things and looks like this is not possible to make any more improvements, please take my apologies on this