How can I get the notification badge on my app menu?

Get Help
1

Hi!

I am working on an app where I could really use the notification badge on the app menu to alert users that they have new notifications, is there a bit of custom code I can use for this purpose?

My app is currently using the bottom menu style but it would be great to know how I can add this in the different types of app menus.

2

There is a code snippet that should be added to the Global JavaScript to add a badge notification to specific menu item

$('.hamburger, .fl-app-menu ul > li:nth-child(2) > .internal-link').addClass(
  'add-notification-badge'
);

Keep in mind, number 2 should be changed to the number of your “Notifications” menu item, e.g. if the “Notifications” is the 10th menu item, number 2 in the code above should be changed to 10, like this:

$('.hamburger, .fl-app-menu ul > li:nth-child(10) > .internal-link').addClass(
  'add-notification-badge'
);

Open menu without notifications:

image
image415×582 27.8 KB

Code added to the Global JavaScript:

image
image961×291 13.3 KB

Closed menu with notifications:
image

Open menu with notifications:

image
image432×693 23.8 KB

For different menu types, supported by Fliplet, the position of the notification badge might be different and will require some custom CSS to adjust.

3

I can’t get this to work on a bottom menu style, can you help?

4

Bottom menu has different CSS classes, so we need to change the code to this:

$(‘.hamburger, .fl-bottom-bar-menu-holder ul > li:nth-child(3) > .fl-bottom-bar-icon-holder’).addClass(‘add-notification-badge’);

This will work only if your notification menu item is visible in the first row of the bottom menu.
image

But in the future, it is planned to improve the menu settings to make it more dynamic and customizable to user needs.