I have a problem with the foundation 6 menu stacks loading slowly on a homepage:
Depending on the screen size it jumps from half / third of the browser screen to full screen. Part of the delay is because of the loading of the background video in Section Pro. But it is set to lazy load, so I would suspect that the video loading shouldn’t be a problem.
It is a rebuild of the menu in a Foundation 1 page which is loading the way I would like it.
Below is a screenshot of the Foundation 6 menu. It is basically a Sticky stack with 2 containers. 1 is set to show on medium and Large the other is set to Show on small only. It are two RW menu’s and for the small screens in a topbar to get a hamburger menu.
Idea’s how to solve this and get a fullscreen menu rendered directly?
I’m on an iPad right now so I don’t have any real tools available, but have you tried without the background video? Let’s tag @joeworkman, he should be able to help you out.
I wonder if it’s the Sticky stack. Since the menu is already a the top of the page, you don’t need the Sticky stack. You should instead make the menu fixed to the top of the page all of the time. You can do this with a position swatch.
The sticky stack is there so that something that starts further down on the page will stick to the top when it reaches it. You are confusing the sticky stack since it’s at the top on page load.
Hi Joe, Thanks, that was it. I had to fiddle quite a bit to get the menu working again after adding the position stack. Once I added the position stack, the full width setting of the menu stack got overwritten. Fixed it with a Width stack. Also the background video was behind the menu, so the toppart was cut off. I added a 1 column stack with the hight of the menu and now, it looks like, everything works as expected.
