---
description: Guide on how to use Navigation Notification shortcode
---

# Navigation Notification

When inserting the **Navigation Notification** shortcode, an element with a predefined style will show.

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGrVcTPn_4WbqqAQfL-%2F-MGrVfqv7k5-Razbe-Qj%2Fnavigation-notification-icon.jpg?alt=media\&token=5f7e4e76-3ec4-4f86-aca5-f8ead425e807)

To use another icon, switch **Use different icon** switcher and settings fields will appear. Choose an icon from the **Icon Library** or **upload SVG**.&#x20;

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGmsk7GBzKrxSWFCPSD%2Fnotification-icon.jpg?alt=media\&token=475381da-839f-484e-afb0-861b3ed9eace)

If you leave the **default** icon, the tab **Icon Style** will look different then if you choose to use a **different** icon.&#x20;

**Default Icon**

![Icon Style tab for the default icon](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGmyOMy25_8Kn0cTVpZ%2Fnotification-icon-default-style.jpg?alt=media\&token=96dc482c-acba-4412-874c-8b76f3905ee2)



![Icon Style tab, Active section for the default icon](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGn00BrWH-9nkgJSoh8%2Factive-notification-icon-default.jpg?alt=media\&token=b2dd3e3d-9317-4033-a1d6-40b21353dade)



![Icon Style tab, On hover section for the default icon](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGn0mRadyHCuzc5A42b%2Fhover-notification-icon-default.jpg?alt=media\&token=1c50ef07-c11f-4598-8a82-5b4a32c1feb3)

**Uploaded icon**

![Icon Style tab for the uploaded icon](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGn3fi-zg0-Nlpkr72L%2Fuploaded-notification-icon.jpg?alt=media\&token=5d3620c0-62cd-4605-bb3c-54d67bb91c5e)

**Uploaded SVG**

![Icon Style tab for the uploaded SVG](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGn4XSvffVISjIJglpC%2Fuploaded-svg-notification-icon.jpg?alt=media\&token=253dfd7d-0b7e-4332-b289-66a97ed58e17)

**Badge Style -** these are style settings for the **Badge** that will appear if there is any notification.

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGn6Q2NmyQ0OR6lGmt6%2Fbadge-style-notification.jpg?alt=media\&token=e3f991d1-76a7-4ea4-a8ab-a30b24cd8a22)

Settings for the **Badge** **on hover**

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGn7vMymlK8L8OeNWhr%2Fbadge-notification-on-hover.jpg.jpg?alt=media\&token=6ab020e8-52d1-447c-b00a-c1f6fd667899)

Settings for the **Badge** when the icon is **active**

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGn8xQhTwHtuSAMatMU%2Fnotifcation-badge-active.jpg?alt=media\&token=0c602c04-63eb-46fa-9331-cb16addcb909)

**Notification Message Style** - set the style of the notification message box.

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGnB9Aw9nLlAZSsJ3ju%2Fnotification-message-style.jpg?alt=media\&token=9d748984-d945-443f-8ac7-39f5fcaa9b04)

Style the title, content, and position image with a couple of clicks.

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGnBdt2TMI51DFquvsJ%2Fnotification-message-style-content.jpg?alt=media\&token=03c3cc24-ada5-49e7-9634-514b258efc74)

Style the footer time element,

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGnDU8-v4DfmKhzSC2v%2Ffooter-time-notification-message.jpg?alt=media\&token=8d0779fb-005c-44b4-b44b-9e62e48ce734)

as well as the footer link.

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGnE7M6doGFAnJz_rWj%2Ffooter-link-notification-message.jpg?alt=media\&token=6139fe63-3ac4-4964-97a3-83eaa91548a4)

Sort the link and the time element as you wish.

![](https://1486114154-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lz6OF0whdfulTst_zqR%2F-MGmDbd_5xBwaDXHEPz_%2F-MGnETciLVdEnGNCf5dE%2Fsort-footer-elements-notification-message.jpg?alt=media\&token=03aef924-3b0f-4129-aabd-997521cff89d)
