Sticky menu in Hero makes content below jump

I’ve started to put together a demo/play project, just something to build out to learn more about Blocs.

I’m managing to figure most things out, but this one has me stumped.

http://ci-clientservices.com/clientdev/designed/index.html

As you scroll down and the menu sticks, the content (the icon/logo) in the middle of the hero jumps up a bit. If I take the menu off sticky this doesn’t happen.

Can anyone think of a fix?

Ta.

I looked at this and can’t say I have ever noticed it before, however I checked and saw the same thing happen on one of my own sites. This is clearly some sort of adjustment taking place as the sticky menu kicks in. I’ll try to experiment later and see if I can find a solution, but I suspect this may require some adjustment in the way sticky menu is implemented.

This may be down to Bootstrap or possibly something that Norm can fix. You could certainly send in a bug report, including a link to this forum thread and as much relevant information as possible. https://help.blocsapp.com/knowledge-base/reporting-bugs/#bug-report-form

In the meantime, I wouldn’t expend too much time on this point, since this has never been picked up on previously by users or clients as far as I know. Norm is vastly faster at fixing things than Realmac and simple fixes have sometimes been put out in hours, rather than months. It’s trickier when a problem is only seen by one user and occurs randomly but problems that are easy to replicate generally see swift fixes.

Thanks for that.

The devils in the detail when it comes to pro looking websites, and I’m sadly a bit anal about stuff like this, so it’ll drive me nuts til it’s fixed. That you can see it on another projects at least says it’s not something I’ve done, which is good.

I’ll file that bug tracker thing.

I’ve just gone through a bunch of sites and realised I rarely use sticky menu. I only found one case where this happened on a website that is currently in development and this is limited to cases where sticky menu is used in a hero bloc. There is no problem otherwise if you have a normal structure bloc with an image or header text for example.

Not understanding what you’re saying entirely.

Are you saying there is a workaround to have a sticky menu which initially overlays the background of the container it’s in and then sticks, that doesn’t exhibit this issue? If so, can you tell me about it?

Or, are you saying the fix is not to use sticky menus with a Hero?

And… Whilst an expert is here, to save me starting a new thread… Is there a way to apply delay to a scoll effect?

Ta.

No I am saying there seems to be a specific issue using the hero bloc with sticky menu enabled that causes items below to jump as the sticky kicks in. There may be a workaround but I’d need time to figure it out and there are many users on this forum who are far more technically advanced than I am with these things.

There was a thread recently on scroll effects that might help you and there is a bric by @Whittfield that would probably accomplish what you need. I haven’t tried it myself, but it could be useful.

1 Like

The jump is due to the padding that gets applied when the sticky happens being wrong.

I’m on my iPad at present, but I suspect it could be caused when using the sticky tick box in the side bar and then using a custom class to set the padding on the Nav bar independent of the sidebar option. It’s likely Blocs uses that sidebar setting when creating the the smooth scroll.

If I understand you correctly, I’ve not applied any custom padding or margin to the elements inside the Hero.

I’ve just played around with adding some positive and negative margin to the navbar, it only things worse! Also being playing with the setting in Chrome Inspect, nothing obvious and nothing seems to adjust.

This one is above my paygrade!

UPDATE: I’ve started to work out a fix. It’s applied: http://ci-clientservices.com/clientdev/designed/

I’ve removed the built-in sticky option and added it back using some custom css…

.stickymen {
	position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

Doing it this way, although not yet adding in the colour change, it does remove the jumpy issue. So that issue certainly seems to be the way the sticky class in the sidebar settings is getting applied.

I might try to work the solution up a bit more, might not. Might wait to see what @Norm suggests.

I’ve just tested this and it’s happening by default without any custom adjustments to padding.

Good find. Looks like when I moved the hero Blocs over to use flex box it caused this unwanted jumpiness when using sticky navs within the hero Blocs.

Its all patched up and corrected in 3.4.3 (I’ll have it out early next week) :+1:

4 Likes

So we are all get a patch for Christmas from @Norm :grin:

1 Like