Fixed header - a more "smooth" solution is needed :)

Hello BB

I am looking for a way to make the transition from big header to small fixed header a little more elegant.

Right now the fixed header just goes from display:none to display:block. I know how to style and define the fixed header once it is visible, but where can I change the initial appearance so I am able to play a bit with opacity and animation?

Thanks in advance
Thomas

Hey Thomas,

This might be a bit tricky. We’re using the jQuery fadeIn function to show the fixed menu. There’s currently no way to tweak the animation. You would probably need to disable the default fixed header and implement your own. You can do this by copy/pasting the header HTML (it’s generated by a couple of function calls to the FL Theme class) and overriding the header.php file in a child theme. Then, you could write your own Javascript (of course, you can reference and copy/paste ours) and have complete control over the transition. Sorry there’s not an easier way. Let me know if that’s clear. I can elaborate more if you’d like! :slight_smile:

  • Robby

Thanks for the suggestions Robby :slight_smile:

I might just change the fade duration to make that part a little more in the direction I want.

Sure! The only thing to be wary of is that you don’t want to modify the Javascript in the parent theme because it will get overwritten when you update =/

I know, but thanks for the reminder :slight_smile: