How custom skrinking and sticky header

Beaver Themer
1

Hello community !

I’m looking for customizing shrink effect of beaver themer. For example, to change size of text of my sticky & shrinking header when I scroll down. Or, choose height of my stichy header.

Can you help me ?

Aurélien

2

Dear @agiorgino ,
could you solve this issue? I am on the same challenge … how to customize a shrinking and sticky header … I want the header of my website to get an opacity when it’s shrinked and sticks at the top…

3

Dear @Philipok,

I solve my issue, you can call a transition effect of your SVG class this :

.NameOfYourSVGclass svg {
  -webkit-transition: all 0.4s ease-in-out, background-position 1ms;
  -moz-transition: all 0.4s ease-in-out, background-position 1ms;
  transition: all 0.4s ease-in-out, background-position 1ms;
  width: 100%;
}

Then apply change size effect of you shrinking header :

.fl-theme-builder-header-shrink .NameOfYourSVGclass svg {
  width: 50%;
}

You can apply this logic on any element of your choice. For example, reduce text of your shrink header (not “width: value;” but with “font-size: value;”)

Hope you succeed !
Aurélien

4

Great. Thank you very much!!