Sticky Header Buggy

9 years, 5 months ago Lona09
Participant

Expired

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!
9 years, 5 months ago Kris
Participant

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!
9 years, 5 months ago Lona09
Participant

Expired

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 :)

9 years, 5 months ago

Participant

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!

9 years, 5 months ago Lona09
Participant

Expired

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!
9 years, 5 months ago Ruco
Keymaster
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 9 years, 5 months ago by Ruco.

Viewing 5 reply threads

You must be logged in to reply to this topic.

Community Forums

Site Links

Useful Articles

Login