Hi there!
Newbie here. I love Yuzool’s Navigation menu bar… I’ve got an html code for a link that will make a pop-up email sign-up form that I’d love to implement into the menu, but I’ve no idea if it’s possible or how to go about it. Like this website: hiatuskaiyote.com
My website is neongru.com
Any advice gladly received. Thanks for your time!
~ Ru
Hello,
Please email us at support@yuzoolthemes.com and provide a snapshot or two to describe exactly what you want to do. Kind regards,
Support Team at Yuzoolthemes.com
Hey, cool site. Well done. Congrats 
Yeah… seconded. Well done. Site looks great.
Anyone have any other ideas for implementing a nice pop-up style email form? There have got to be a dozen cool ways to do that.
It looks like you’re predominantly using Foundation and BWD stacks for the Neon Gru site – is that correct @rulemer?
Maybe @joeworkman has some ideas too.
Isaiah
Hi @juebai and @isaiah - thanks for the kind words! Learning a lot from this project but still tentatively feeling my way around customising code and understanding how to get to where I want.
Yeah exactly right. And some 1LD stacks too, I love their work.
Thanks @YuzoolSupport for the reply 
You are welcome. Please keep us updated. Kind regards,
Yuzool Support Team
You can definitely launch a Foundation lightbox from a link. I assume that the Yuzool menu stack uses the standard link tool. If so, then you can definitely do that.
As for the form, you can use the Foundation forms for subscription. The setup depends on what email service you are using. I also have a stack called Post Office that integrates with many different email service providers.
Hi @joeworkman, appreciate the reply. Can you please expand a bit - how would I approach launching a foundation lightbox from a menu link? The links in the Yuzool menu are generated automatically based on what pages I have in my RW project, I don’t think I have individual control over them
Thanks for the heads up about Post Office, I’ll check that out
If you cannot manually generate links in the menu, I am not sure how you could get a custom link into it.
Here is a sample of the HTML that you would need to launch a F1 lightbox from a link…
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
Here are the docs for it… https://get.foundation/sites/docs-v5/components/reveal.html
But again, I am not sure that this is even possible with the Yuzool menu stack.
Joe has kindly provided the sample link required to launch the F1 asset. It should be fairly simple to inject the link into the navigation menu with a little bit of JS.
Add the following to the poor excuse for a Javascript code container:
var $menu_ul = $(".fnav-menu");
var $item = '<li role="menuitem"><a href="#" data-reveal-id="myModal">Custom Link</a><li>';
$menu_ul .append($item);
Pay close attention to the middle line, the $item variable, that is where you can change the ‘Custom Link’ text to be whatever you need it to be. The ‘myModal’ part is going to be significant and will need to tie in to your Foundation lightbox attributes/properties.
This example injects the new item directly onto the first level of the menu; hopefully that is what you are looking for. Theoretically it could be injected into any of the child levels that the navigation stack supports, but a different snippet would be needed for that.
The console on your site is extremely busy…lots of messages/errors/warnings. I’d definitely look at trying to clean those up where possible.
Jeez thanks man really appreciate that response. I know very little about Javascript and nothing about site consoles so I’ll have to go do some digging to understand and implement what you’ve said, but that’s great, really needed that direction so I’m much obliged!
No worries. There should not be much to it, just paste that snippet into the JavaScript code container on a page where you have a F1 lightbox, preview in the browser and see what you get…
Sadly no joy with just adding the javascript code and the myModal code, would you expect to see an extra menu item called ‘Custom Link’ pop up?
This is a handy intro to the web inspector in Safari (includes Javascript console):
@rulemer
My apologies … I was assuming a little too much.
Indeed, this is what you should see and what what I see when I enter that JQuery directly into the console of your site:
I suspect that the snippet is running before the page is ready.
Replace that snippet with this modified version which should only execute after the page is ‘ready’ and the dependencies have loaded.
$( document ).ready(function() {
var $menu_ul = $(".fnav-menu");
var $item = '<li role="menuitem"><a href="#" data-reveal-id="myModal">Custom Link</a><li>'
$menu_ul .append($item);
});
Let me know if that helps, if still no joy, I’ll be happy to look into it more.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
