Controlling the 'BOiNG'

Hi Yigit,
Correct, as I said in the original post it temporarily covers up the menu: In other words it doesn’t stay covered. But it should not get covered at all though, even temporarily because it looks like an error.
In my opinion either of these solutions would be an acceptable behavior for the header during the bounce:
A. The menu/header should always be stuck to the top of the browser window, on top of everything, and float above the black bar during the bounce.
-or-
B. The menu/header should bounce with the rest of the page as it does in the Mobile Version (the sceenshot in previous post), so the header bar stays below the black bar that descends from above.

~R

• This reply was modified 10 years ago by The_Rhyme_Animal.

Are you saying it should be like:

#header_main .container, .main_menu ul:first-child > li a { max-height: 88px !important; }
#header, #header > .container, .logo *, .main_menu ul:first-child > li a { max-height: 88px !important; }

Or just:

#header, #header > .container, .logo *, .main_menu ul:first-child > li a { max-height: 88px !important; }

Neither of these permutations work correctly.
Right now I have the former in my Quick CSS.
You can check the site to see the effect.
~R

• This reply was modified 10 years ago by The_Rhyme_Animal.

Sorry, this did not stop the appearance of the black bar during the bounce.
And it is still covering the navigation.

I see that your addition does break the shrinking header functionality as you say, but it does not solve any of the issues either.

Couldn’t this be handled with a properly structured z-index style? Just to keep the navigation floating above the black bar?

~R

Hi Y’all,
I think I have solved this finally. None of the above CSS fixes worked properly. So I took time and dug through the script to find what was actually causing the “BOING”. The solution is simple and is as follows.

In avia.js, replace line 1453:

    newH = el_height - st;

with the following:

    if(st > 0){
          newH = el_height - st;
    } else {
          newH = el_height;
    }

This solves the safari-boing and looks a lot better.
I suggest rolling this small change into future releases of the theme.
(this was tested on Enfold 3.0.8 in Safari 8.0.3 and Firefox 34.0.5)
~R

• This reply was modified 9 years, 10 months ago by The_Rhyme_Animal.