Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 9, 2018 at 1:21 pm #1042727
    JantienM

    Hi,

    I just updated to the latest version of the theme (4.5.1). Everything seems fine except for my shrinking header. I tried finding the code in the avia.js file to change it suggested as in this thread:

    https://kriesi.at/support/topic/shrinking-header-height/
    It worked in the previous version of the theme (4.2.2), but now I cannot find the code anymore.

    This is the code I want to change in the avia.js file:

    if(st < el_height/2)
	                {
	                    newH = el_height - st;
	                    
	                    av_change_class(header, 'remove', 'header-scrolled');
	                    //header.removeClass('header-scrolled');
	                }
	                else
	                {
	                    newH = el_height/2;
    December 9, 2018 at 5:03 pm #1042760
    JantienM

    Update: I found out that the newest version of enfold has a seperate js file for the shrinking header called “avia-snippet-sticky-header.js”.
    Is there a way to put this file in the child theme? I tried copying this file to my child theme and make the changes there, but that doesn’t do the trick.

    Hope you can advise me on this!

    Thanks a lot!

    December 9, 2018 at 5:44 pm #1042774
    michaelH

    Hi Jantien

    What exactly do you want to achieve? Just change the height of your shrinking header?

    In my opinion you don’t need to change a JS file for that, just use the following CSS code with 60px for example:

    .header-scrolled {
    min-height: 60px;
}

    Does that do the trick?

    Best
    Michael

    December 10, 2018 at 7:54 pm #1043296
    Victoria

    Hi JantienM,

    Have you tried the solution posted by Michael?

    Best regards,
    Victoria

    December 10, 2018 at 8:50 pm #1043324
    Guenni007

    you can see here the influence of the divisors – and for new outsourced file the child-theme functions.php entry here: https://kriesi.at/support/topic/shrinking-of-header-amount-an-info/#post-963107

    the lines to edit are now ( Enfold 4.5.1.) on 64 and 76
    if you like to have the shrink effect on mobiles too: edit 62 and get rid of : && !isMobile

    December 11, 2018 at 11:10 am #1043693
    JantienM

    Yes , this is what I needed! It works, thanks a lot Guenni007!

    • This reply was modified 6 years ago by JantienM.
    December 11, 2018 at 11:14 am #1043695
    JantienM

    Hi Victoria,

    I tried the solution of Michael, but then the layout of my header changes too much and I have to adjust that, which didn’t work out as I wanted. The margin of the menu bar gets lost that way.

    The solution of Guenni007 is working great though.

    Thanks!

    December 11, 2018 at 12:42 pm #1043721
    michaelH

    Hi Jantien

    The 60px was just an example. You can choose any value there which suits your needs to make it bigger:

    .header-scrolled {
    min-height: 80px;
}

    Thanks
    Michael

    December 15, 2018 at 1:42 pm #1045641
    Yigit

    Hi,

    Glad @Guenni007 could help! Let us know if you have any other questions or issues :)

    @Guenni007     and @michaelH, thanks for your help :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Change height shrinking header’ is closed to new replies.