Docs

[yovo_cgn]

Hi,
is there a way to:
Have a big logo once you enter the side
(best would be centered + nav below),

but than a small-Logo once you start scrolling down,
and small-Logo would go to left side, nav to right.

Greetings
Bastian

[Prasant Rai]

Hello Bastian,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[yovo_cgn]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the url of your site. To resize the logo upon scrolling in the page, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  .x-navbar.x-navbar-fixed-top .x-brand img {
    width: 75px;
    transition: all 100ms linear;
  }
}

I noticed that there is a JS error on the page. Please deactivate MyFontsWebfontsKit plugin. You could also try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Hope this helps.

[yovo_cgn]

Very nice!

Is there a way to:
upon scrolling back up, the logo enlarges again
?

Thx for the hint with the plugin problems.
I´ll look into it

[Joao]

Hi There,

Can you please switch the code above provided for this.

On Customizer / Custom / CSS

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 0.5s ease, padding-top 0.5s ease;
    transition: height12 0.5s ease, padding-top 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 0.5s ease;
    transition: min-height 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 150px;
margin-top: 0;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}

On Customizer / Custom / Javascript

jQuery(function($) {
  var $body   = $('body');
  var $navbar = $('.x-navbar');
  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
    var boxedClasses = '';
    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {
      if ( $(this).scrollTop() >= 60 ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }
    });
  }
});

Adjust the px´s inside the code according to your wishes.

Hope that helps,

Joao

[yovo_cgn]

Thx for the in depth help!

I left all values in css and java as you posted it above
there is a “flicker” when i scroll down or up top.
Besides that the logo doesn´t change the size

[Rad]

Hi there,

Please remove the Javascript and CSS as previously given, then replace this existing CSS

@media(min-width: 980px){
  .x-navbar.x-navbar-fixed-top .x-brand img {
    width: 75px;
    transition: all 100ms linear;
  }
}

with this,

  @media(min-width: 980px){
  .x-navbar.x-navbar-fixed-top .x-brand img {
    width: 75px;
    transition: all 100ms linear;
  }
.x-navbar .x-brand img {
    transition: all 100ms linear;
  }
}

Thanks!

[yovo_cgn]

Scrolling down with resize is working like a charm.

Upon scrolling back up,
the template seems to expect the big logo size
at least there is a blank space under the logo (wich stays small)
– the Logo itself doesn´t resize.

I deleted all related css & java and just used the last code.

Kind regards

[Christopher]

Hi there,

Update previous CSS to :

  @media(min-width: 980px){
a.x-brand.img.resize-logo img {
    width: 75px;
    transition: all 100ms linear;
}
a.x-brand.img img {
    width: 100px;
    transition: all 100ms linear;
}
}

Add this JS too :

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-brand').addClass("resize-logo");
		} else {
			$('.x-brand').removeClass("resize-logo");
		}
	});
});

Hope it helps.

[Author]

Posts