Docs

[ldollard]

Right now my logo is set as stacked and my menu as fixed.

http://corridor5.novelcreativeagency.com/

Is there a way when i scroll down for the logo to move inline with my menu so the logo is still visable?

Thanks

[Rupok]

Hi there,

You can follow this thread – https://community.theme.co/forums/topic/stacked-to-inline-logo-on-scroll/

There are some other thread you might find by searching.

Cheers!

[ldollard]

thats great thanks

[Prasant Rai]

You are most welcome. 🙂

[ldollard]

One more question, is there anyway to make the menu fade in, instead of just like a straight jump cut.

like on this site.

NOVEL Creative Agency

thanks so much.

[Rupok]

Hi there,

It seems you have applied some transition there. Do you still need any help?

Let us know.

[ldollard]

i do that novel site was the example of what i want

this

http://corridor5.novelcreativeagency.com/

is the site i need to use that transition on.

thanks

[Joao]

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[ldollard]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the information. To animate the logo change, please update the JS code by using this instead:

jQuery(document).ready(function($) {
   var $masthead  = $('.masthead');
   var $logo      = $('.x-brand');
   var $navbar    = $('.x-navbar');
   var $navBtn    = $('.x-btn-navbar');
   var $logoBar   = $('.x-logobar-inner > .x-container');
   
   function navStackToInline() {
      if ( $navbar.hasClass('x-navbar-fixed-top') ) {
         $masthead.removeClass('masthead-stacked');
         $masthead.addClass('masthead-inline');
         $logo.insertBefore($navBtn);
      } else {
         $masthead.removeClass('masthead-inline');
         $masthead.addClass('masthead-stacked');
         $logo.appendTo($logoBar);
      }
   }

   navStackToInline();

   $(window).ready(navStackToInline).scroll(function() {
      navStackToInline();
      $('.x-brand').fadeTo( "slow", 1 );
   });
   
});

And then please also add the following css code in the customizer, Appearance > Customize > Custom > CSS

.masthead .x-brand{
  opacity: 0;
  transition: opacity 0.5s linear;
}

Please let us know if this works out for you.

[ldollard]

Hi thanks Rue,

That doesn’t work and when it kinda does it almost makes the page crash.

http://corridor5.novelcreativeagency.com/

[ldollard]

most of the time the logo now just disappears.

[Paul R]

Hi,

Please replace the css code to this.

.masthead .x-brand {
  opacity: 1;
  transition: opacity 0.5s linear;
}

Hope that helps

[ldollard]

thanks it now shows, but does not fade in transition. Basically looked like it did before. thanks for the help though.

[Rupok]

You are welcome!

[Author]

Posts