Offset value defined by class not working

Hello,

I just tested your page and the .header offset value seems to be working as expected. Did you fix it or?

Hi.

Unfortunately it works only once. When you click on another menu item, the offset is gone.

I think that the issue could be caused by sticky header settings. I am using fixed position together with top with minus value and transformY to create slide up animation. Here is the sticky header class and header class settings:

/*Sticky Header */

.sticky-header {

  background-color: color(3);

  position: fixed;

  top: -6.25rem;

  left: 0;

  width: 100%;

  transform: translateY(6.25rem);

  transition: transform .5s;

  box-shadow: 0px 4px 10px rgba(34,36,43,0.1);

/*Header*/

.header {

    width: 100%;

    height: 6.25rem;

    position: absolute;

    z-index: 10;

    top: 0px;

    left: 0px;

I guess that transform of sticky header could cause the problem.

What do you think?

BR

Tomas

Ah! I see. You are correct, indeed the translateY transformation causes the issue.

You can achieve the same effect you’re having now by using the margin-top property (instead of translateY) and the offset will work as expected. Add the following to your CSS, test it and let me know:

header.header.sticky-header {
    transform: translateY(0); 
    margin-top: 6.25rem;
    transition: margin-top .5s;
}

Hi.

Thank you very much. It works like magic.

One small change can make big difference.

Tomas

Glad I helped ?? Let me know if you need more help.