Pro custom header sticky moves

Support
#1

Hi there,

Can you take a look at askshell.co.uk and advise how I keep the bottom margin and stop the slight shrinking of the header?

Thanks
Tony

#2

Hi Tony,

Please change the height of bar to 11em:

Then remove the bottom margin of the bar also.

Hope it helps :slight_smile:

#3

Hi there,
Thanks but I am trying to maintain the gap between bar1 and bar 2.
Also the whitespace below the logo needs to be the equivelant of the height of the top bar (does that make sense?)

The logo needs to appear to be verticall centered between the two bars.

Thanks
Tony

#4

Hi Tony,

I don’t see it shrinking anymore, and are you referring to have the logo overlaps the two header bars (vertically overlapping that will make it vertically centered)? Because it’s already vertically centered on its header bar. And making them overlaps may not work with flex layout like in the header.

Thanks!

#5

Hi there,

The shrinking has stopped.
realistically I just need to add a margin to the bottom that is consistent when scrolling

#6

Hi @tonylees,

Would you mind providing more details about that? I’m not really sure how is the margin related to scrolling. The one I’m seeing on your header is the second header bar animates as scroll compared to 1st header bar that stayed fixed.

Thanks!

#7

The image attached shows what I am trying to acheive

Thanks
Tony

#8

Hi Tony,

Please reduce the top margin of container inside that bar from 70 to 50 pixels:

If it still doesn’t help, please provide us with your admin account so we can take a closer look.

Thanks.

#9

Hi
That seems to have sorted the bottom margin … is there anyway to fix bar2 rather thanhaving it drop down from the top?

Thanks
Tony

#10

Hey Tony,

The dropping from the top will always be noticeable because the of the placement of the bar from being in a relative position to a sticky position. We can adjust the animation delay by adding this custom css:

.site .x-bar-is-visible.x-bar-is-sticky {
    transition: opacity 0.5s ease;
}

Please let us know if this works out for you.

#11

Thats done it

Thanks for the help

#12

Glad we were able to help :slight_smile:

#13

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