# Overlaid navigation button not working!

**URL:** <https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [December 19, 2023, 2:23pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311 "2023-12-19T14:23:41Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rahul\_Patil](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rahul_patil/32/53539_2.png) [@Rahul\_Patil](https://forum.inductiveautomation.com/u/Rahul_Patil)\
**Post date:** [December 19, 2023, 2:23pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/1 "2023-12-19T14:23:41Z")

</div>



---

<div class="post-metadata">

**Author:** ![HelloWorld](https://avatars.discourse-cdn.com/v4/letter/h/b782af/32.png) [@HelloWorld](https://forum.inductiveautomation.com/u/HelloWorld)\
**Post date:** [December 19, 2023, 2:26pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/2 "2023-12-19T14:26:28Z")

</div>

Have you tried Navigation on the "onActionPerformed" event for the button ?

---

<div class="post-metadata">

**Author:** ![Rahul\_Patil](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rahul_patil/32/53539_2.png) [@Rahul\_Patil](https://forum.inductiveautomation.com/u/Rahul_Patil)\
**Post date:** [December 19, 2023, 2:28pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/3 "2023-12-19T14:28:11Z")

</div>

Ya tried that too 'didn't help' , any reason why ?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [December 19, 2023, 2:43pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/4 "2023-12-19T14:43:09Z")

</div>

Did you put an image OVER the button ?  
If that's the case, then what you're clicking is the image, NOT the button. It just won't work.

---

<div class="post-metadata">

**Author:** ![Rahul\_Patil](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rahul_patil/32/53539_2.png) [@Rahul\_Patil](https://forum.inductiveautomation.com/u/Rahul_Patil)\
**Post date:** [December 19, 2023, 2:44pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/5 "2023-12-19T14:44:53Z")

</div>

Sir , the button has placed 'Move Forward' or 'over the front' , and I am actually clicking the Button and not the picture.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [December 19, 2023, 2:46pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/6 "2023-12-19T14:46:21Z")

</div>

Then how did you make it invisible ?

The simple fact that your mouse pointer doesn't change when you mouse over the button shows that you're not actually clicking it.

---

<div class="post-metadata">

**Author:** ![HelloWorld](https://avatars.discourse-cdn.com/v4/letter/h/b782af/32.png) [@HelloWorld](https://forum.inductiveautomation.com/u/HelloWorld)\
**Post date:** [December 19, 2023, 2:47pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/7 "2023-12-19T14:47:20Z")

</div>

If you go to misc. in the style props of the button, you can change the cursor to see if you're actually hovering over the button.

---

<div class="post-metadata">

**Author:** ![Hayden\_Watson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hayden_watson/32/48792_2.png) [@Hayden\_Watson](https://forum.inductiveautomation.com/u/Hayden_Watson)\
**Post date:** [December 19, 2023, 2:49pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/8 "2023-12-19T14:49:43Z")

</div>

Or you could just add the OnClick event to the picture itself, no need for a button in this case

---

<div class="post-metadata">

**Author:** ![Rahul\_Patil](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rahul_patil/32/53539_2.png) [@Rahul\_Patil](https://forum.inductiveautomation.com/u/Rahul_Patil)\
**Post date:** [December 19, 2023, 2:55pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/9 "2023-12-19T14:55:31Z")

</div>

Yes , i got your point.

But i am not able to figure out , how to rectify ?

The button is placed 'Over the front'

---

<div class="post-metadata">

**Author:** ![Rahul\_Patil](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rahul_patil/32/53539_2.png) [@Rahul\_Patil](https://forum.inductiveautomation.com/u/Rahul_Patil)\
**Post date:** [December 19, 2023, 2:56pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/10 "2023-12-19T14:56:29Z")

</div>

The Picture is a big screenshot of lot of PLC , I just want , when a user touch the particular part of picture , he can move to that particular screen.

---

<div class="post-metadata">

**Author:** ![HelloWorld](https://avatars.discourse-cdn.com/v4/letter/h/b782af/32.png) [@HelloWorld](https://forum.inductiveautomation.com/u/HelloWorld)\
**Post date:** [December 19, 2023, 2:57pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/11 "2023-12-19T14:57:12Z")

</div>

The buttons meta property "visible" is not enabled. Should the button be visible ?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [December 19, 2023, 2:59pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/12 "2023-12-19T14:59:00Z")

</div>

Recheck the visible property of your buttons, then add a `opacity: 0` style.

---

<div class="post-metadata">

**Author:** ![Rahul\_Patil](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rahul_patil/32/53539_2.png) [@Rahul\_Patil](https://forum.inductiveautomation.com/u/Rahul_Patil)\
**Post date:** [December 19, 2023, 2:59pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/13 "2023-12-19T14:59:06Z")

</div>

If i make it visible , transperancy is lost , which is not what i want.

---

<div class="post-metadata">

**Author:** ![Rahul\_Patil](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rahul_patil/32/53539_2.png) [@Rahul\_Patil](https://forum.inductiveautomation.com/u/Rahul_Patil)\
**Post date:** [December 19, 2023, 3:10pm UTC](https://forum.inductiveautomation.com/t/overlaid-navigation-button-not-working/83311/14 "2023-12-19T15:10:47Z")

</div>

Thanks a lot !
