I’m using the Anchor stack with MegaMenu and it all works perfectly. However, if I try to type in a URL with the anchor it goes to the right location on the page but without the top margin that shows when using MegaMenu. I’m not sure why this is the case, or how I can fix it.
Then I’m taken to the right location but without the margin above the header. Is there a way to set things up some the full link (Login) also shows the top margin?
The MegaMenu is probably using javascript to scroll to the correct spot on the page. That would also allow it to use the margin defined in the stack when it calculates where to scroll to.
When you go to a url with the anchor tag included (#anchor), it’s just going to use the normal html engine to go to the correct position on the page. It won’t use javascript, so it won’t be able to use the margin set in MegaMenu.
You can probably use a Margin stack in the anchor stack to get your positioning where you want it without using the margin option in the MegaMenu stack. If you do that, then you should end up at the same spot either way you get there.
This will likely take some playing around to get just right, and you may have to make some compromises on the actual page layout in terms of spacing between elements. Reducing bottom margins on the element above and adding top margin to a stack in the anchor stack may get you close.
Don: Thanks for the suggestion. I wasn’t successful trying your suggested approach but I think I may have to fiddle with things a bit more. I’m booked up time wise today, but will try using your approach again in a couple of days when work lightens up.
Mathew, it looks like your page for that area is roughly:
(Container stack)
(Anchor stack for Classes)
(Container stack)
(H2 for Classes)
The container inside the “classes” anchor appears to have a top padding of 40px, correct? It also looks like you menu height is 60px. Try setting the height of that container padding to 100px (instead of 40px).
That should push your Classes H2 down 40px below your menu.
I’m guessing that you’re using 60px in the MegaMenu as your animation offset, correct? With the above padding change, set this to 0.
You will end up with an extra 60px of space between the “Classes” title and the image above it. While not ideal, it may still look ok.
Maybe Adam will have an alternate suggestion for you.
Don: Thanks so much for the suggestion. You are describing the situation re: stacks, padding, etc. correctly. And your solution does work. But I’m not crazy about the extra 60px of white space.
… I think I may just need to decide which is more important: the white spacing (padding) between sections or the ability to have a nice clean looking direct link to a section of the page. I wanted to do both, but I am guessing that the ability to directly link to a specific section is going to come up relatively infrequently. So unless Adam has a better suggestion I’ll live with the slightly chopped off header when directly linking to a section title.
… but I may change my mind based on user feedback and I would not have thought of the solution you proposed. Thank you very much.
Instead of setting that container’s top padding to 100px (from 40px), try something like 50-55px. That should keep your “Classes” from being cut off and you only end up with 10-15px more space, instead of an extra 60px.
Then you can set the MegaMenu animation offset to 45-50px and that should position it exactly how you have it now when clicking the menu button.
This should give you a very usable direct link (no text cut off) without a lot of extra whitespace on the page.
I think @DLH pretty much got things covered for you @mitchellm in this thread, but if not please post letting us know.
I did want to touch on one thing:
What @DLH said above is correct. The offset is handled by the Mega Menu stack’s javascript. The normal anchors are just that – the standard anchor links provided by the HTML. I’d originally intended on having the option to have all anchor links able to have an offset and the animated scrolling, but… unfortunately that caused problems for things like the Glide stacks, among others. We saw this problem crop up in the forum a while back before Potion Pack launched even, as I’d already incorporated the code into the main Foundry code to handle the offsets and scrolling. Alas it wasn’t meant to be and was taken out before Potion Pack’s launch.