Hi all
Is it possible to integrate another stack in a navigation bar? For example, I would like to have the modal stack next to some navigation points and the site logo in the bar.
I use Foundry v2, Potion Pack und Thunder Pack.
Thanks for your help!
Best wishes
Tom
I tend to use Nav Pro for most Foundry projects now, so bit rusty on the other options, but from memory Mega Menu will allow the inclusion of a button, which with a bit of lateral thinking could I guess launch a modal, perhaps not the default Foundry one though, not sure, would need to check.
But… And sorry, but this is the potentially annoying preachy bit… It’s not advisable to put anything in the menu bar that the user isn’t expecting. This of course is assuming your users won’t be expecting a modal!
What I mean is…
All that is standard, it’s how most menus work.
Now, if you fire into that lot a link that opens a modal, it’s not expected, so potentially bad practice and worse, confusing to users. And confused users tend to leave sites fast.
I know, that was a bit preachy, and it might be you know exactly what you are doing: There will always be good reasons to go against the norm. But I kinda figured it was worth mentioning, just in case.
Hi
Thank you very much for your quick reply. I like to learn from others. Therefore I take your tips very gladly.
However, I’ll try to explain to you what I’m trying to do:
I want a button in the navigation bar that opens a modal. In this one you can login to sitelok - memberseite.
Many websites have such a login button in the navigation bar. Do you know another solution for this problem?
Kind regards
Tom
Yes, I know exactly what you are looking to do, and while many sites do this, most, or at least the ones that have thought about things, also have a dedicated log in page. Why? So people can navigate directly to it.
I use Sitelok and a dedicated log in page would always be my recommendation. I use it on the Template Repo page, and it’s a dedicated log in.
The reason for the dedicated login is so I can put direct links to the page elsewhere on the site.
If you really do want to go the modal route, I’m pretty sure Sitelok includes a snippet that you can attach to a button to open a login popup. Perhaps looks at that with the Mega menu.
It is possible, but not a straight forward and reliable method:
Check out my example:
https://kitchensink.heiko.codes/display-test/
The button in the navigation (Mega Menu) will open a Mega Modal.
I trigger the modal by adding a ID to the button for toggling the modal and it’s ID (#stacks_in_76-animatedModal) as the link target, but this ID is about to change when editing the page.
When it comes to UX, I vote for dedicated login and registration pages. If ppl have to login regularely, they love to bookmark this page.
But this doesn’t mean that you shouldn’t not offer other ways of login. It’s also a common pattern to have the login form directly in the main navigation, especially if the website requires to be logged to be usefull (web portals, membership sites, gaming sites…)
That’s actually a very valid point, and as you say, it is how many sites work.
I’m quite new to making members sites, or sites that require logins, and that is definitely I’ll consider going forward.
Another way using Mega Menu has just occiured to me, tried it and it works.
To a Mega Menu add a dropdown. Remove the default nav stack inside the dropdown and add a dropzone. Then add your login form snippet to it.
Works: testpage | Template Repo
I’ve not tested on mobile though, that might not work!
Edit: Slight issue: Once logged in the dropdown doesn’t close by default. so people don’t realise they are logged in (they can still see the log in box).
In that demo I fixed it by using an if/then statement stack, which did seem to close the dropdown, but I’d say it’s primed for some browser conflicts, so most likely not a great idea.
If you can tidy up the method for closing the dropdown upon successful logging in, you might be on to a winner.
Good morning
This is exactly how I imagined it. Thank you very much for your tips. Maybe someone from the community has another idea regarding the display on mobile devices.
Have a sunny day.
How about just doing things a bit differently?
Instead of having the login link in the menu, perhaps introduce a dedicated “Members” container across the top of the page, as I’ve done on Template Repo…
It has two states… Logged out…
And logged in…
The icons to the right are only visible to admins, for easy access to Sitelok and other dashboards.
That site is built in UIkit3, but I’m working on a Foundry site at the moment with the same sort of implementation…
Very doable in Foundry.
This approach means you can use the menu that best suits the entire site, not be restricted to one that can handle the log in thing.
Best UX approach for membership sited, IMO.
