Sticky Menu Animation

Support
#1

http://146.66.100.120/~traillif/

Two things:

  1. I’ve given the logo 30px top padding in its normal state and then reduced it to 10px in it’s fixed state (after scrolling).
    When scrolling back up to the top the logo jumps around because the removal of the “x-bar-fixed” class is delayed until after the logo finishes growing back to its initial size. I’d like for the transition between 10px top padding to 30px top padding to happen smoothly as the logo grows.

  2. Similar problem with the menu bar background color. I would like the background color to be removed as soon as I reach the top and not be delayed until after the logo finishes it’s animation.

Both of these problems have to do with the delayed removal of the “x-bar-fixed” class I believe.

Any suggestions?

#2

Hi Jonathan ,

Please remove the padding you added using custom css

.home .menu-bar.x-bar-fixed .logo {
     padding: 10px 0px 10px 0px; 
}

Try to adjust the shrink amount instead.

Then to fix the background timing, try to adjust transition from 100 to 200

eg.

  .home .menu-bar.e2756-4.x-bar, .home .menu-bar.e2756-10.x-bar {
      -webkit-transition: background 200ms linear;
      -ms-transition: background 200ms linear;
       transition: background 200ms linear;
    }

Hope that helps

#3

Removing the custom padding doesn’t help me because I need the padding to change when the bar becomes fixed. The Shrink amount doesn’t change the padding, just the logo size.

The background timing solution isn’t working either. I think increasing the transition time is just making the transition speed slower.

What I’m seeing is that the removal of the “x-bar-fixed” class from the “x-bar-is-sticky” div is delayed for some reason. I’d like for that class to be removed immediately when the bar reaches the top of the browser.

#4

Hey Jonathan,

Regretfully, what you’re after would require custom development which is outside the scope of our support.

The supported method in Pro is you setup 2 bars if you want to transition from transparent bar to solid colored bar. Your logo padding is also causing an issue as Paul pointed out. We can’t get around that. This might possible with additional custom coding but again, this would be outside the scope of our support.

If you wish to proceed with custom coding or further extend what the builder offers, you would need to consult with a third party developer.

Thank you for understanding.

#5

Do you know what is causing the removal of the “x-bar-fixed” class to be delayed when the bar reaches the top of the page?

Maybe if we can pinpoint that in the code I can at least fixed the problem of the background color staying too long.

#6

Hi Jonathan,

The code is part of the theme core files and we don’t recommend changing it.

You can add your own js code to remove that class.

Try adding the code below in Header > JS

jQuery(function($) {
    $(window).scroll(function(){  
    if($(this).scrollTop()==0){
        $('.x-bar').removeClass('x-bar-fixed');
    }
  });
});

Please note that the code provided above serves as a guide only and is to help you in getting started. Further customization 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.

Thank you for understanding.

#7

That seemed to work for removing the class right away but as I tried to continue to modify css to get things the way I want them the experience quickly degraded.

I’ve removed all customization outside of the Pro editor now and I have it looking and functioning acceptably.

One major bug I’m seeing is in iPhone Safari. Check out this video screen grab and pay attention to the header:

#8

Thanks for the video, Jonathan. I loaded your site in my Android phone too and though it’s not drastic as in your video, I still experienced a bit of resize lagging. I’ll try to replicate this in my test site and if it happens there also, I will post in our issue tracker.

For now, the best solution for this would be to hide your shrinking bar in mobile and display a new bar without shrinking. Do the reverse in desktop.

Thanks.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.