Off Canvas Header Badge / Notification Alert Issue

[WRCwithME]

Hi there,

This is currently what my Off Canvas Header Badges looks like:

PROBLEM: As you can see, my "badges" cover the icons for each alerts. I can remove the borders (and padding) but that makes little to no difference.

LOGICAL SOLUTION: Give the item more padding vertically (or spacing), however if I do that it throws out Siropu Chat's Badge as well (as it shares that same code), and does not resolve the issue with it covering the icon.

POSSIBLE WORKAROUND SOLUTION: Just use the STAFF BAR, but then
(a) I don't know how to remove the information duplicating,
(b) that will result in a large navy gap if I do remove it.

PREFERRED SOLUTION: Getting the Notification Alerts (Badges) to show exactly the same as the STAFF BAR, but just in the OFF CANVAS HEADER.

I suspect my answer lies with code in XB_CANVAS.LESS or XB_CANVAS (unlikely), and even if I make Navigation Padding higher, the notification alert is in the same area.

*NOTE* Xenforo refers to Notification Alerts as "BADGE", which can be customised under APP > STYLES > # STYLE PROPERTIES > MISCELLANEOUS.

Thanks for any help on this one

 

[Russ]

Any reason why you have the visitor tabs enabled for the staff bar when the header is there?

Also... do you have any other custom CSS going on as this is the default look:

 

[WRCwithME]

Hi Russ,

Thanks for getting back to me.

Any reason why you have the visitor tabs enabled for the staff bar when the header is there?

It was to test if the position for those alerts was the same in Visitor Tabs/Staff Bar, or if it was only in the header.

It shows the Visitor tabs in staff bar have the correct location for the badges/alerts, whilst the header doesn't.

Also... do you have any other custom CSS going on as this is the default look:

Nothing outside of the defaults that come with the theme.

I do have a few addons installed but none of them should interact with that side of things. E.g Xon's Warning Acknowledgement.

This is the settings for badges.

 

[Russ]

I'll probably need a login to debug this one, can you submit one via a ticket? https://pixelexit.com/tickets/ I need to see an alert bubble live on your site.

 

[WRCwithME]

WOOHOO!!!!!!

Whilst this might not seem like a massive victory for others, I know VERY little CSS. I can read code a little bit, and understand how it works to a degree, but have never really coded much in CSS at all.

Anyway with recent assistance thanks to @Russ and Steve, I've started to get a better understanding of how to locate elements using Design Mode (or Inspect in Firefox/Chrome), as well as where code should go and how it should be formatted.

That lead me to look into this one, determined to resolve the problem, and I've found a solution.

Whilst it doesn't move the alerts, it moves the header section in the OFF CANVAS ONLY menu so that they display better. By moving it down and across, when you edit the BADGE properties, they don't get fouled up over the icon (unless you do something crazy).

This also helps on mobiles.

DESKTOP BEFORE:

DESKTOP AFTER:

How I did it was adding the following code to EXTRA.CSS under APPEARANCE > TEMPLATES > YOUR STYLE NAME > EXTRA.CSS.

.p-navgroup-link {
    padding-top: 30px;
    padding-left: 20px;
}

Thanks for the help on this one, and hopefully it can help someone else in the future if they have this question