Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
  • #9843


    how can I change the distance between the social links, like the search icon for example, and their items appearing when hovering over them:

    I haven’t found anything, where to change the CSS (?), so that the hovering items – like the field, where to type in the search – comes more to the top to the small icons.

    The problem at my site is, that when hovering over the social icons, the search field for example, disappears when moving the mouse down, to type into it ==> the distance is to large, see screenshot.



    Anyone an idea please?


    still not resolved, support please?


    I need this very urgent, please any idea?

    If my English is too bad to understand, please see the screenshot with descriptions in it.



    Hi colorit2,

    Have you made in css modifcations already? The base theme files have the hover effects touching the upper menu area already.



    Yes, as you can see in the screenshot, I have changed the CSS for the box layout. So it might had effect to the social icons, too.

    But I haven’t found neither in my custom.css nor in the minimal.css anything, where to change

    a) the margin/padding (?) for these tooltips (?)

    b) where to change especially the searchform tooltip,because at the moment, I can’t access the form in the tooltip, because it disappears, when moving the cursor down to it (see screenshot: the distance is there to much, too) and:

    c) in the demo theme, when clicking on the search icon, the tooltip remains visible, so that I can write in it, but in mine – clicking on the search icon – the tooltip with the searchform does not remain visible.

    Where can I change what code, so that the distance can get more lower and how to keep the searchform accessible for typing in it?



    Hi colorit2,

    There is a couple of classes you can try to modify, but without seeing your site live I can’t tell you exactly which one will do the trick.

    You can try:

    .avia_tooltip {}



    .avia_tooltip_inner, .avia_tooltip_content{}


    .tooltip_search_site .avia_tooltip_content{}

    .tooltip_search_site #searchform{}

    .tooltip_search_site #s{}

    #top #searchsubmit, #top #searchsubmit:hover{}

    #top .tooltip_search_site #searchsubmit, #top .tooltip_search_site #searchsubmit:hover{}

    #top .tooltip_search_site #searchsubmit:hover {}

    These are all in your style.css between lines ~436 and ~522.


    thanks, I have tried several, but haven’t found the right one, that needs to be adjusted to change the distance between the icons itself and the field, that appears, when hovering over the icon:

    That’s especially important, because as long as it is like now, nobody can type in any search :-(

    My site is here:

    It’s not yet ready, but you can see the social icons at the top.



    For the general hover icons modify the margin top value:

    body .avia_tooltip {
    margin: -23px 0 0 -84px;

    for the search field modify the tooltip_search_site classes margin top value

    body .tooltip_search_site {
    margin: -20px 0 0 -160px;


    Thank you. The code for the margin works like a charm, but the problem still is, if I move down the cursor from the search icon, to type something into the search field, it disappears, so that I cannot write in it.

    Where can I change what, so that the search field stays, when moving the cursor from the search icon down to the search field like in the demo theme?

    Here is mine:




    Open up js/avia.js and search for following code:

    start: 30,
    active: 20,
    end: 30

    You can adjust the activate parameter – this should affect the tooltip behaviour and solve your issue.

    Best regards,



    thanks, but unfortunately it doesn’t solve this problem. I have now changed in avia.js these values, too, but the search field is disappearing as soon as you move down your cursor from the search icon to the appearing search field.

    If you look at the demo theme then I noticed, that

    a) there the searchfield has a little arrow, which mine has not? Perhaps out of view because of some parameters (margins)?

    b) although the search field has now nearly no distance between the search icon, it does not remain visible, when moving the cursor to it, so that you can type in any search words …

    I’m not so familiar with PHP and JS etc, so I can’t find it out …


    Hm probably one of the many modifications you made messed up with the field.

    please try to change

    body .tooltip_search_site {
    margin: -20px 0 0 -160px;


    body .tooltip_search_site {
    margin: -36px 0 0 -160px;
    padding-top: 11px;


    Thanks, Kriesi, this change causes a “jumping” of the searchfield …

    Where do I find the code for this little arrow on top of (not only) the animated searchfield? I don’t know, but in these file(s) I probably need to add a margin-top, too?

    Which file and and code is responsible, so that the search tooltip “stays visible” when the cursor moves on it?


    puh, I got it …, it’s such a small error, that causes such a problem ;-)

    The responsible code for this whole problem is in the style.css:

    .avia_tooltip {

    background: url("images/shared/arrow_up.png") no-repeat scroll 80px top transparent;

    margin: 0 0 0 -84px;

    padding: 10px 0 0;

    position: absolute;

    text-align: center;

    width: 180px;

    z-index: 1000;

    font-size: 11px;




    and there – for some reasons, don’t know anymore – I have changed the part

    padding: 10px 0 0;


    padding: -10px 0 0;

    So the little arrow is not shown and therefor when you move down your mouse, the tooltip disappears … why ever …

    – – – – – – – – – –


    So if somebody also needs this boxed layout of mine with a margin-top of 30px, then you need to add to your custom.css for a correct display and function of the social icons’ tooltips:

    .boxed #wrap_all {

    border-color: #A0918A;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    margin: 30px auto;

    border-color: #AAAAAA #AAAAAA -moz-use-text-color;

    border-style: solid solid none;

    border-width: 1px 1px medium;

    box-shadow: 0 8px 8px 0 #202020;


    body .avia_tooltip {

    margin: -23px 0 0 -84px;


    body .tooltip_search_site {

    margin: -36px 0 0 -160px;

    padding-top: 11 px;


    Thanks a lot, Kriesi, for your patience, but now it works like a charm :-)


    Glad its finally working for you and a big thanks for providing your solution with the mods you’ve made. I’ll mark this as resolved.

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘How to change distance between social links and hover fields (like search etc.)’ is closed to new replies.