# Yuzool Navigation - adding a popup link?

**URL:** <https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083>\
**Category:** RapidWeaver Classic\
**Created:** [August 1, 2020, 11:27pm UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083 "2020-08-01T23:27:42Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![rulemer](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@rulemer](https://forums.realmacsoftware.com/u/rulemer)\
**Post date:** [August 1, 2020, 11:27pm UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/1 "2020-08-01T23:27:42Z")

</div>

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](http://hiatuskaiyote.com)

My website is [neongru.com](https://www.neongru.com)

Any advice gladly received. Thanks for your time!

~ Ru

---

<div class="post-metadata">

**Author:** ![instacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/instacks/32/23339_2.png) [@instacks](https://forums.realmacsoftware.com/u/instacks)\
**Post date:** [August 2, 2020, 5:56am UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/2 "2020-08-02T05:56:19Z")

</div>

@YuzoolSupport

---

<div class="post-metadata">

**Author:** ![YuzoolSupport](https://avatars.discourse-cdn.com/v4/letter/y/46a35a/32.png) [@YuzoolSupport](https://forums.realmacsoftware.com/u/YuzoolSupport)\
**Post date:** [August 2, 2020, 6:14am UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/3 "2020-08-02T06:14:02Z")

</div>

Hello,

Please email us at [support@yuzoolthemes.com](mailto:support@yuzoolthemes.com) and provide a snapshot or two to describe exactly what you want to do. Kind regards,

Support Team at [Yuzoolthemes.com](http://Yuzoolthemes.com)

---

<div class="post-metadata">

**Author:** ![juebai](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/juebai/32/2332_2.png) [@juebai](https://forums.realmacsoftware.com/u/juebai)\
**Post date:** [August 2, 2020, 7:24pm UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/4 "2020-08-02T19:24:38Z")

</div>

Hey, cool site. Well done. Congrats 😃

---

<div class="post-metadata">

**Author:** ![isaiah](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/isaiah/32/93_2.png) [@isaiah](https://forums.realmacsoftware.com/u/isaiah)\
**Post date:** [August 2, 2020, 7:54pm UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/5 "2020-08-02T19:54:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rulemer](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@rulemer](https://forums.realmacsoftware.com/u/rulemer)\
**Post date:** [August 3, 2020, 12:01am UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/6 "2020-08-03T00:01:12Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![YuzoolSupport](https://avatars.discourse-cdn.com/v4/letter/y/46a35a/32.png) [@YuzoolSupport](https://forums.realmacsoftware.com/u/YuzoolSupport)\
**Post date:** [August 3, 2020, 7:15am UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/7 "2020-08-03T07:15:57Z")

</div>

You are welcome. Please keep us updated. Kind regards,

Yuzool Support Team

---

<div class="post-metadata">

**Author:** ![joeworkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/joeworkman/32/23780_2.png) [@joeworkman](https://forums.realmacsoftware.com/u/joeworkman)\
**Post date:** [August 5, 2020, 4:30pm UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/8 "2020-08-05T16:30:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rulemer](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@rulemer](https://forums.realmacsoftware.com/u/rulemer)\
**Post date:** [August 5, 2020, 5:46pm UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/9 "2020-08-05T17:46:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![joeworkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/joeworkman/32/23780_2.png) [@joeworkman](https://forums.realmacsoftware.com/u/joeworkman)\
**Post date:** [August 5, 2020, 6:07pm UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/10 "2020-08-05T18:07:55Z")

</div>

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…

```auto
<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](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.

---

<div class="post-metadata">

**Author:** ![indridcold](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/indridcold/32/16088_2.png) [@indridcold](https://forums.realmacsoftware.com/u/indridcold)\
**Post date:** [August 5, 2020, 8:06pm UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/11 "2020-08-05T20:06:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rulemer](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@rulemer](https://forums.realmacsoftware.com/u/rulemer)\
**Post date:** [August 5, 2020, 10:59pm UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/12 "2020-08-05T22:59:56Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![indridcold](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/indridcold/32/16088_2.png) [@indridcold](https://forums.realmacsoftware.com/u/indridcold)\
**Post date:** [August 5, 2020, 11:19pm UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/13 "2020-08-05T23:19:02Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![rulemer](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@rulemer](https://forums.realmacsoftware.com/u/rulemer)\
**Post date:** [August 5, 2020, 11:35pm UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/14 "2020-08-05T23:35:52Z")

</div>

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?

 ![Screenshot 2020-08-06 at 00.34.24](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/2/928a809bc7adfdd25b14f9a662cfeea3485b3178.jpeg)

---

<div class="post-metadata">

**Author:** ![thang](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/thang/32/303_2.png) [@thang](https://forums.realmacsoftware.com/u/thang)\
**Post date:** [August 6, 2020, 12:17am UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/15 "2020-08-06T00:17:42Z")

</div>

This is a handy intro to the web inspector in Safari (includes Javascript console):

> **[Web Inspector Walkthrough - Tech Talks - Videos - Apple Developer](https://developer.apple.com/videos/play/tech-talks/401/)**
>
> Web Inspector is packed with features designed to make inspection, debugging and delivery of your web content a breeze. Get an overview...

---

<div class="post-metadata">

**Author:** ![rulemer](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@rulemer](https://forums.realmacsoftware.com/u/rulemer)\
**Post date:** [August 6, 2020, 12:30am UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/16 "2020-08-06T00:30:51Z")

</div>

Amazing, thanks for that @thang , I’ll get stuck in this week 🙂

---

<div class="post-metadata">

**Author:** ![indridcold](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/indridcold/32/16088_2.png) [@indridcold](https://forums.realmacsoftware.com/u/indridcold)\
**Post date:** [August 6, 2020, 7:14am UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/17 "2020-08-06T07:14:53Z")

</div>

@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:

 ![img1](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/6/c628ec203f01e300cd14f32e926aed5c7bf1b1ae.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![rulemer](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@rulemer](https://forums.realmacsoftware.com/u/rulemer)\
**Post date:** [August 6, 2020, 9:57am UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/18 "2020-08-06T09:57:45Z")

</div>

@indridcold

 ![Screenshot 2020-08-06 at 10.56.22](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/1/41b66471bd1a0ff0361afeaa69c75f4f71d9b443.png)

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\
**Post date:** [September 5, 2020, 8:03pm UTC](https://forums.realmacsoftware.com/t/yuzool-navigation-adding-a-popup-link/34083/19 "2020-09-05T20:03:54Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
