Tagged: shrinking header
-
AuthorPosts
-
August 12, 2017 at 10:21 pm #838055
Hello,
I want to make the header with logo shrink till it disappears. Already accomplished that in a way, but the header just pops to none when header is about 50% shrunken. See the mp4 attachment i made. Really want to make this more smooth. Shrinking till 1px (?) before it goes to none.
Can this be done?Thanks for your assistance.
BertAugust 12, 2017 at 11:17 pm #838070Hey Bert2,
Can you please share the code you are using, and the URL to the site.
Including a admin login in the private content area might also be helpful.Best regards,
MikeAugust 13, 2017 at 1:25 am #838098Hi Mike,
I used custom css.
.header-scrolled #header_main > .container {
display: none !important;
}If you still need acces to the site, please let me know.
Bert
August 13, 2017 at 10:31 am #838194Hi Bert,
Can you try this code instead:
.header-scrolled #header_main > .container, .header-scrolled #header_main > .container * { height:0!important; line-height:0!important; opacity:0; -o-transition: all .1s; -mox-transition: all .1s; -webkit-transition: all .1s; transition:all 0.1s; }
You can adjust the speed
0.1s
to suit your preference.Let us know if you have questions.
Best regards,
SarahAugust 13, 2017 at 4:53 pm #838260Hello Sarah,
Well, this is a huge step forward. Thank you so much!
Is it possible to let the logo shrink further before it disappears?August 13, 2017 at 5:56 pm #838273well this is an old thread here i try to explain on :
https://kriesi.at/support/topic/reduce-sticky-header-size/#post-722364
and :
https://kriesi.at/support/topic/reduce-sticky-header-size/#post-724020it all is in avia.js file – Kriesi did here choose the absolute easiest value to have because on that case of half height is the endpoint of scrolling it is that special case where the scrolled distance to reach the endpoint of scrolling it exactly the half height of starting height..
For example if you start with a initial header height of 300 px and you want to reach the endheight of 150px
Distance to scroll for reaching the endheight is the sameThis code in avia.js is for the shrinkbehavior (since line 1536) :
var logo = $('#header_main .container .logo img, #header_main .container .logo a'), elements = $('#header_main .container:not(#header_main_alternate>.container), #header_main .main_menu ul:first-child > li > a:not(.avia_mega_div a, #header_main_alternate a), #header_main #menu-item-shop .cart_dropdown_link'), el_height = $(elements).filter(':first').height(), isMobile = $.avia_utilities.isMobile, scroll_top = $('#scroll-top-link'), transparent = header.is('.av_header_transparency'), shrinking = header.is('.av_header_shrinking'), topbar_height = header.find('#header_meta').outerHeight(), set_height = function() { var st = win.scrollTop(), newH = 0, st_real = st; if(unsticktop) st -= topbar_height; if(st < 0) st = 0; if(shrinking && !isMobile) { if(st < el_height/2) { newH = el_height - st; if(st <= 0){ newH = el_height; } av_change_class(header, 'remove', 'header-scrolled'); //header.removeClass('header-scrolled'); } else { newH = el_height/2; //header.addClass('header-scrolled'); av_change_class(header, 'add', 'header-scrolled'); }
so what if you like to start at 300px initial height and want to end at 1px header height.
The distance you have to scroll to reach one pixel is 299px ! Aha – so
the value you have to insert here to replace is :if(st < el_height/1.0033)
factor is 300/299
the value here on second place to substitute is :newH = el_height/300;
factor is 1/300see here f.e: https://webers-testseite.de/elegant/
but this makes no sence – because your navigation needs some height to be seen correct – next example to make it clear
it all goes arround the factors in line 1553 and line 1565you start with a header height of 300px and want to end at 50px
first value to be replaced is (because distance to scroll is 250px) 300/250 = 1.2 ( be carfull to not make a comma here it is a point for decimal count)
second value is 300/50 = 6 – so on lines:1553 it is :
if(st < el_height/1.2)
1565 it is:newH = el_height/6;
August 13, 2017 at 6:02 pm #838275by the way : if you like to change it in avia.js you can have your avia.js in child-theme js folder and do activate this :
add_action( 'wp_enqueue_scripts', 'wp_change_aviajs', 100 ); function wp_change_aviajs() { wp_deregister_script( 'avia-default' ); wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true ); }
August 13, 2017 at 6:05 pm #838278Hi Bert,
You’re welcome! :)
Shrinking the logo further would require changing some of the theme’s core javascript files, which we do not recommend unless absolutely necessary.
Best regards,
SarahAugust 13, 2017 at 6:11 pm #838283so on that example above i set now to 300px start point 50px endpoint and try to influence the logo height with an animation to go to zero when setting up the new class header-scrolled-full or header-scrolled.
so see the result on example page above. : https://webers-testseite.de/elegant/
this to quick css
.header-scrolled .logo img { transform: scale(0.01); transform-origin: center center; transition: 0.5s linear }
- This reply was modified 7 years, 3 months ago by Guenni007.
August 13, 2017 at 7:56 pm #838315Hi,
@Guenni007 great example, very smooth, thanks.Best regards,
MikeAugust 13, 2017 at 9:33 pm #838337Guenni007 thank you for your outstanding respons! That animation is spot on! Absolutely gorgeous.
I have the header set up as follows: Logo left and menu below. What i would like is that the top of the header (where the logo is) disappears when further scrolling down and the animation is played. So as a result only the menu is visible.
See the initial mp4 example over hereIf this could be accomplished that would really be great.
THanks,
BertAugust 13, 2017 at 10:00 pm #838350So it has to be a combination of the code by Guenni007:
.header-scrolled .logo img {
transform: scale(0.01);
transform-origin: center center;
transition: 0.5s linear
}
And the code by Sarah:
.header-scrolled #header_main > .container, .header-scrolled #header_main > .container * {
height:0!important;
line-height:0!important;
opacity:0;
-o-transition: all .1s;
-mox-transition: all .1s;
-webkit-transition: all .1s;
transition:all 0.1s;
}Already tried to combine, but without luck so far.
August 14, 2017 at 9:16 am #838496have a look to the example page now – this is only your header layout with your logo and the avia.js changings without css – because
navigation is in the case of nav under logo in header_main_alternate and not in header_main.so we now can shrink the logo to (nearly) nothing (in my example it is 1px) – it works with logo centered menu below too!
the values to change depends on your logo size you inserted ! I reconstruct your logo to have it a bit bigger 600px x 120px
so i set up the initial header size to 120px.go and get your avia.js from enfold/js/ folder overwrite lines (if you got the latest enfold):
old 1553: if(st < el_height/2) new 1553: if(st < el_height/1.008)
1.008 = 120/119 (119px you have to scroll till you reach the endpoint height of 1px)
and
old 1565: newH = el_height/2; new 1565: newH = el_height/120;
initial height was set from me to 120px – the endheight should be 1px so it is 1/120
upload that edited avia.js file to the folder: enfold-child/js/ and add to your functions.php file of the child-theme (via dashboard – design – editor):
add_action( 'wp_enqueue_scripts', 'wp_change_aviajs', 100 ); function wp_change_aviajs() { wp_deregister_script( 'avia-default' ); wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true ); }
thats all !
August 14, 2017 at 9:52 am #838503when you send me an ok – i switch the my layout back to origin and delete your logo.
If you need your logo as path – tell meAugust 15, 2017 at 5:41 pm #839454Guenni007, this worked brilliant!! Thank you ever so much!! Not only design wise, but also educational. Much appreciated.
Regards,
BertAugust 16, 2017 at 6:40 am #839709 -
AuthorPosts
- The topic ‘Infinit Shrinking Header’ is closed to new replies.