-
-
Hi, how are you?
I’m designing a site for my client using the Specular theme and he wants a sticky header that’s very fluid, with the logo decreasing in size from the main header to the sticky one. Something like on this site: https://jolenegoring.com/.
However, the sticky header with this theme is very buggy. It doesn’t show up until halfway down the page, is very jerky, and doesn’t shrink the logo. Could someone provide me with advice on getting closer to what my client wants?
Thanks!
-
Hello,
The sticky navigation can be fixed with some CSS and javascript. Can you send us your site url to take a closer look at it?Best regards!
-
Hi, thanks so much for the response! My site link it daniel-lona.com. I need the sticky header to show up as soon as someone scrolls down the page. The logo should also shrink, and it should be much smoother than it currently is. I look forward to your suggestions! Thanks so much :)
-
Hello,
Please go to your theme files–>wp-content\themes\specular\js and open main.js.
Find these lines:function codelessStickyNav(){ "use strict"; var opened = false; var position = $('.header_wrapper').css('position'); var bool_test = false; $('.logo_only_sticky .header_wrapper #logo').css('opacity', 0).css('visibility', 'hidden'); $(window).scroll(function(){ var top = $(this).scrollTop(); if(top > stickyNavTop + 300 && !opened){ $('body').addClass('sticky_header'); setTimeout(function(){ if($('.header_wrapper').hasClass('background--dark')){ $('.header_wrapper').removeClass('background--dark'); bool_test = true; } $('.header_wrapper').css('position', 'fixed').css('visibility', 'visible').addClass('open'); opened = true; }, 200); $('.logo_only_sticky .header_wrapper #logo').css('visibility', 'visible').css('opacity', 1); }else if(top == 0){ if( ($('.header_wrapper').hasClass('header_1') || $('.header_wrapper').hasClass('header_4') ) && bool_test){ $('.header_wrapper').addClass('background--dark'); } $('body').removeClass('sticky_header'); $('.header_wrapper').removeClass('open').css('position', position); if(codelessSlider){ var slide_color = codelessSlider.activeSlide().data('color'); if( $('.header_wrapper').hasClass('header_1') && !$('.header_wrapper').hasClass('open')) $('.header_wrapper').removeClass('background--light').removeClass('background--dark').addClass('background--'+slide_color); } opened = false; $('.logo_only_sticky .header_wrapper #logo').css('opacity', 0).css('visibility', 'hidden'); } });
and replace with these:
function codelessStickyNav(){ "use strict"; var opened = false; var position = $('.header_wrapper').css('position'); var bool_test = false; $('.logo_only_sticky .header_wrapper #logo').css('opacity', 0).css('visibility', 'hidden'); $(window).scroll(function(){ var top = $(this).scrollTop(); if(top > stickyNavTop && !opened){ $('body').addClass('sticky_header'); $('.header_wrapper').css('position', 'fixed').css('visibility', 'visible').addClass('open'); opened = true; $('.logo_only_sticky .header_wrapper #logo').css('visibility', 'visible').css('opacity', 1); }else if(top == 0){ if( ($('.header_wrapper').hasClass('header_1') || $('.header_wrapper').hasClass('header_4') ) && bool_test){ $('.header_wrapper').addClass('background--dark'); } $('body').removeClass('sticky_header'); $('.header_wrapper').removeClass('open').css('position', position); if(codelessSlider){ var slide_color = codelessSlider.activeSlide().data('color'); if( $('.header_wrapper').hasClass('header_1') && !$('.header_wrapper').hasClass('open')) $('.header_wrapper').removeClass('background--light').removeClass('background--dark').addClass('background--'+slide_color); } opened = false; $('.logo_only_sticky .header_wrapper #logo').css('opacity', 0).css('visibility', 'hidden'); } });
Add these to your custom CSS box:
.header_wrapper.transparent.header_9 { position: fixed; height: 60px; } .header_wrapper.open #logo img { height: 40px; } .open header#header { height: 60px; } .header_wrapper.transparent.header_9.open { padding-bottom: 20px; }
Let us know.
Best regards! -
This looks great! Thanks so much!
One thing, though: when you scroll back up, the transition from sticky header to the primary header is very jolty. Is there a way to make the transition back up as smooth as the transition down?
Thanks!
-
Hello,
Please remove this css code you have added:
.page-id-26 .header_wrapper { margin-bottom: -90px; }
and add this code instead:
.home #content { padding-top: 0 !important; } .header_wrapper { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; -ms-transition-duration: 0s; transition-duration: 0s; } #logo img { transition: height 0.4s cubic-bezier(0.4, 0, 1, 1); -moz- transition: height 0.4s cubic-bezier(0.4, 0, 1, 1); -webkit- transition: height 0.4s cubic-bezier(0.4, 0, 1, 1); }
Best regards!
- This reply was modified 7 years, 8 months ago by Ruco.
-
You must be logged in to reply to this topic.