Tutorial: How to Build a Sticky Menu - Part 1

Yeah, still feels weird to have to do that just to get the transition working :wink:

If the transition classes aren’t applied you won’t get the smooth animation, ideally you’d add those to the custom classes area, but as I said, this is currently not working (re-check in the next beta). Setting the Effects is a workaround for now.

So I have put a sticky menu on my first attempt at an Elements site and it works great on a desktop. On a mobile however the menu is different and the first two items on it sit behind the sticky menu and are therefore not visible or clickable. Obviously a setting somewhere but I cannot find it. In the screenshot below there are two menu items above Terms and Conditions but they are obscured by the sticky menu. Any idea how I change that? Can I somehow turn off the sticky menu for smaller screens where it collapses the menu?

Draft site based on the North Eleven example - https://www.blackrockq.com/

@jbyfield, wow, I have to say, the site is looking great, nice work :ok_hand:

Can you share the project via Elements cloud? That way I can take a look and see what the fix is, I’m sure it’s something very trivial, I just need to see the project :blush:

Thanks Dan. Have chucked it on the cloud but unclear how to share it, even after watching Episode 35. Have to say, your videos make Elements for me, I probably would not have managed without them. Now, after 24 hours, I can’t imagine going back to RW.

One other issue when you get it is that a Flex with three SVG files suddenly appeared in the header after publishing. Must be a hangover from North Eleven but I never saw them and had trouble deleting them. Then I found it kept recovering the files. Mobile Content, Logo and Trigger appeared in the node display as well. Am tempted to start from scratch if they appear again, now I seem to be getting the hang of things.

elementsapp://downloadDocument/l6EBV3jr5GoQ

Hey @jbyfield,

Okay, after a little playing around I managed to fix the issue for you, here’s a video explaining how…

And here’s the project with the Home and One Bedroom pages fixed (as I did in the video) :backhand_index_pointing_right: Open Updated Project in Elements

Let me know if you have any more questions :blush:

P.S. You should post this website in the Built with Elements category, as it’s awesome!

That’s great, thanks for the video Dan. Obviously I didn’t quite follow the Sticky instructions to the letter.

It is a very very basic site and a total rip off of your North Eleven. Still got a couple of issues to sort in there for mobile viewing before I tell the boss I have upgraded it. I expect the font family will change and perhaps some background colours will be going in as well. Just needed to publish to see how it works.

Thanks again, you have saved me from a frustrating few hours.

You’re welcome, and always post on the forum if you get stuck. We’re always around to help out :blush:

Fingers crossed the boss loves it!

wow thank you :folded_hands: Looks really great, love it !

@dan

My thoughts on this, might be wrong and just my case so far on my use of Elements

I believe all Containers are set to z-30, the menu not sure out of the box what the z setting is
If you set the Menu to z-31 that should be all you need to do, no need to even click on isolate for the Menu

No idea what image z setting is if dropped on page as is

I suppose it depends on how many z settings are used in the rest of the site, I assume this would be same for this site

Again might be wrong

It would be useful to understand what z settings for all components are set

z-index-ing can become complicated quickly. It can depend on, among other things, the structure of your site, the position setting you have on components, the isolate setting, and obviously the individual z-index.

There is no bullet proof way of ensuring one component is displayed above all other components all of the time.

The Power of Elements is that it allows you to create virtually any design and layout combination you can imagine, but with great power comes great responsibility — you can get yourself in a pickle with many components fighting for the top z-index spot.