Docs

[yhshin1020]

Hey,

I am trying to achieve a header that decreases in height when you scroll down.

That is, the header should be transparent when on top-of-page, with a slightly higher height and logo size. As soon as we start to scroll, the header goes back to a smaller size with a plain background.

Something like this here: (http://themenectar.com/demo/salient-frostwave/)

I have reviewed all the previous topics on similar matter and all the codes did not seem to work.

Here are the threads i’ve viewed:
https://community.theme.co/forums/topic/transparent-top-navbar-solid-fixed-navbar/
https://community.theme.co/forums/topic/jquery-sticky-header-that-shrinks-when-scrolling-down/
https://community.theme.co/forums/topic/transparent-headernavbar-only-when-on-top-of-page/
https://community.theme.co/forums/topic/shrink-sticky-header-logo-upon-scrolling/
https://community.theme.co/forums/topic/small-issue-with-resizing-headernavbarlogo/
https://community.theme.co/forums/topic/header-resize-on-scroll-with-animations/

These are older threads but this is the most recent one where one of the staff suggested they could implement it for us so I’m hopeful this is still within your scope. (https://community.theme.co/forums/topic/resizing-logo-with-scroll/).

Thank you very much.

[yhshin1020]

This reply has been marked as private.

[Christopher]

Hi there,

Please enable ‘Fixed-top’ navigation layout under Customize -> Header.

Add following code in Customize -> Custom -> Global JavaScript :

jQuery(document).ready(function($){
			$('.x-navbar-fixed-top').css("background-color", "transparent");
	$(window).scroll(function(){
		if ($(this).scrollTop() >10) {
			$('.x-navbar-fixed-top').css("background-color", "#fff");
                        $('.x-brand img').css("width", "30%");
		} else {
			$('.x-navbar-fixed-top').css("background-color", "transparent"); 
                        $('.x-barnd img').css("width", "80%");
		}
	});
});

Add following code in <strong>Customize -> Custom -> Global CSS</strong> :

.x-navbar {
transition: all 0.3s linear;
}`

Hope it helps.

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-navbar.x-navbar-fixed-top .x-brand img {
  width: 20% !important;
}
.x-slider-container.below {
    margin-top: -72px !important;
}

Then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop()<=0) {
              $('.x-navbar').removeClass("x-navbar-fixed-top");
      }
    });
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please wrap your code within media query rule :

@media (min-width:979px){
.x-navbar.x-navbar-fixed-top .x-brand img {
  width: 20% !important;
}
.x-slider-container.below {
    margin-top: -72px !important;
}
}

#2 Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

#4 Update JS code to :

jQuery(function($) {
  $('.x-navbar-fixed-top').css("background-color", "transparent");
	$(window).scroll(function(){
		if ($(this).scrollTop() >10) {
			$('.x-navbar-fixed-top').css("background-color", "#fff");
                        $('.x-brand img').css("width", "70px");
		} else {
			$('.x-navbar-fixed-top').css("background-color", "transparent"); 
                        $('.x-barnd img').css("width", "80%");
		}
	});

Hope it helps.

[yhshin1020]

This reply has been marked as private.

[Lely]

Hi There,

Can you clarify what you meant by this: The header is still above the image.

1. Please use this:

.masthead .x-navbar-fixed-top .x-brand {
    margin-bottom: 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.x-navbar-fixed-top .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {
    font-size: 15px;
    line-height: 1.3em;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    color: red; /*Change to your preferred font color*/
}

2.)Update this:

	$(window).scroll(function(){
		if ($(this).scrollTop() >10) {
			$('.x-navbar-fixed-top').css("background-color", "#fff");
                        $('.x-brand img').css("width", "70px");
                        $('.x-navbar-fixed-top .x-brand img').attr('src','http://mysites.com/your-imagehere.phg');
		} else {
			$('.x-navbar-fixed-top').css("background-color", "transparent"); 
                        $('.x-barnd img').css("width", "80%");
                        $('.x-brand img').attr('src','http://www.guidedogssg.com/wp-content/uploads/2016/07/unnamed.png');
		}
	});

Hope this helps.

[yhshin1020]

This reply has been marked as private.

[Joao]

Hi There,

I have updated your JS and CSS and now it works.

Hope it helps.

Joao

[yhshin1020]

This reply has been marked as private.

[Joao]

Hi There,

I have made some of the adjustments you required.

To change your logo on mobile please use the code below and substitue the image with the image you want to use on smaller devices:

@media (max-width: 979px){
    .x-brand.img {
        background: url(http://placehold.it/200x50) no-repeat center center !important;
        background-size: 100% 100% !important;
    }
    .x-brand.img img {
        opacity: 0 !Important;
    }
}

After adding this code everything should be fine.

I am not sure about what you mean with changing the boxshadow property after scroll, please clarify what you would like to achieve.

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

Joao

[Author]

Posts