[AddonsLab] Navigation Badge 1.0.0

[AddonsLab]

Hello everyone,

The add-on works on XenForo 2.2.x. We have updated product information now.

would this work for Members tab dynamically somehow with a callback ?

Yes, it can work with any tab, all your callback needs is to return the data to be shown.

Thank you!

 

[beerForo]

What am I doing wrong?

 

[OverHere]

will this addon be updated ?

thanks

 

[SAB]

Hello
Is this plugin still alive?
I would like to add a badge that shows how many resources are available?

 

[AddonsLab]

Hello everyone!

Sorry for the delay with the reply. The add-on works and we do not have any reports regarding latest versions of XenForo. You can see it working in the demo board - https://xf2.addonslab.com/index.php



Thank you!

 

[Andy.N]

@AddonsLab
I have an issue with the badge not showing up properly. It happens when I make the parent navigation basic type and 2 childs, each of them node type pointing to a page node.




Link https://quantnet.com/forum/

 

[Andy.N]

Issue seems to be with the dropdown icon messing up the Badge static value
With dropdown
<span class="p-navEl-link p-navEl-link--menuTrigger badgeContainer badgeContainer--highlighted customBadgeContainer navranking" data-badge="New" data-nav-id="ranking">2024 Rankings</span>

When on the child level i.e no dropdown icon
<span class="p-navEl-link badgeContainer badgeContainer--highlighted customBadgeContainer navranking" data-badge="New" data-nav-id="ranking">2024 Rankings</span>

 

[AddonsLab]

Issue seems to be with the dropdown icon messing up the Badge static value
With dropdown
<span class="p-navEl-link p-navEl-link--menuTrigger badgeContainer badgeContainer--highlighted customBadgeContainer navranking" data-badge="New" data-nav-id="ranking">2024 Rankings</span>

When on the child level i.e no dropdown icon
<span class="p-navEl-link badgeContainer badgeContainer--highlighted customBadgeContainer navranking" data-badge="New" data-nav-id="ranking">2024 Rankings</span>
View attachment 302844

The reason it does not work is difference of your layout from the default XenForo layout. By default, XenForo navigation has two a elements, one for the navigation item, another one for the arrow next to it. The "after" presudo-class on the first element is used to put the badge, and that does not conflict with the second element, which also has an after pseudo-class used to display the arrow:


On your board, however, there is just a single link with a span element in it, which is used by your theme to add the arrow:


As you can see, the "badge" classes are used to the same p-navEl-link element, just it is used differently on your board.

The only solution would be to somehow customize the add-on to add the CSS class to the parent a element for your theme. We are not using a template modification, but hook into navigation building process of XenForo and add it using default attributes key of navigation item, so your theme simply puts these attributes on another element compared to the default layout. So an easier fix would be checking why your navigation has different layout and fixing it with your designer.

Thank you!

 

[Andy.N]

The reason it does not work is difference of your layout from the default XenForo layout. By default, XenForo navigation has two a elements, one for the navigation item, another one for the arrow next to it. The "after" presudo-class on the first element is used to put the badge, and that does not conflict with the second element, which also has an after pseudo-class used to display the arrow:
View attachment 302933

On your board, however, there is just a single link with a span element in it, which is used by your theme to add the arrow:
View attachment 302934

As you can see, the "badge" classes are used to the same p-navEl-link element, just it is used differently on your board.

The only solution would be to somehow customize the add-on to add the CSS class to the parent a element for your theme. We are not using a template modification, but hook into navigation building process of XenForo and add it using default attributes key of navigation item, so your theme simply puts these attributes on another element compared to the default layout. So an easier fix would be checking why your navigation has different layout and fixing it with your designer.

Thank you!

Thank you for the detailed explaination. This is the stock XF theme.
I added the badge to different menu which has sub nav and they display no issue.
It used to display fine when the Ranking nav is a node type and link to a page node. Now I change the type to basic and it no longer works.

 

[AddonsLab]

Thank you for the detailed explaination. This is the stock XF theme.
I added the badge to different menu which has sub nav and they display no issue.
It used to display fine when the Ranking nav is a node type and link to a page node. Now I change the type to basic and it no longer works.

Sure, I see now it happens on default theme as well, but found that it is related to the navigation item missing "link". So if you can put any meaningful link for the parent navigation entry, for example the link to the first node, the style issue would be fixed. You can also use # instead of a link, just in that case the browser will scroll to the top of the page when the button is clicked.

 

[Andy.N]

Sure, I see now it happens on default theme as well, but found that it is related to the navigation item missing "link". So if you can put any meaningful link for the parent navigation entry, for example the link to the first node, the style issue would be fixed. You can also use # instead of a link, just in that case the browser will scroll to the top of the page when the button is clicked.

Thank you for the detailed help. Is this something can be fixed with an future update to the addon?