Notifications number overlapping on main menu and…

[Michael]

Hello,

I’m a newbie to this and having a couple of issues.

1. As I attached a screenshot below, on the top main menu, notifications number overlaps the text title ‘Message’ and on the bottom menu that doesn’t happen. How do I get the top menu to not have the overlapping?

2. Also, on the top menu and on the buddypress panel the notification with number is with a circle, yet on the bottom is a square. I want them all to be squared with the number of notifications inside. How do I change that?

3. Another problem with this is when I change the buttons color, it applies for the link and notifications color but the bottom menu, stays a different color for the notifications box(darker red), how do I get them all to be the same color?

4. Other than that, the footer background color I change to white from styling menu yet it stays the same color as the buddypanel (purple). How can i fix this?

Thank you and happy new year.

M*

[Anonymous]

Hi @miguelp, Please PM me your site url so I can provide you exact css to fix these issues.

Regards

[Michael]

Sent 🙂

[Anonymous]

Thanks I will check that and get back to you..

[Michael]

Hello @pallavi

Any update on the html code to fix this issue? It’s been almost 2 weeks now.

Hope all is well

Michael

[Anonymous]

Hi @miguelp, Sorry for the delayed response..

1. Top main menu, notifications:
.header-navigation ul li a span {
    right: -6px !important;
    font-size: 10px !important;
    padding: 0px 4px !important;
}
.header-navigation ul li a span.count {
    display: block !important;
}

2. I want them all to be squared with the number of notifications inside
.header-navigation ul li a span {
    border-radius: 0 !important;

3. Please let me know which button’s color you want to change as all buttons has different classes according to their section.

4. Footer background color:
div.footer-inner-bottom {
    background-color: #000 !important;
}

Regards

[Michael]

Hello @pallavi

Thank you for the coding.
Everything works except the last one with the color for footer. The whole footer remains the same color as the BuddyPanel on the side. I’ve attached a printscreen of the code you sent in custom codes section.

Also for Number 3, the notification color which appears with the number next to ‘Messages’ tab is a different red when I add the menu to the footer of the page. How can I make the notifications color the same red as the other menus I have on the page. Like I print screened in first picture, you can see the BuddyPanel and top menu have the same Red color , but bottom footer menu , for some reason is a darker red color…

Also, concerning the issue with wanting the notifcations to all be squared with the number of notifications inside, the BuddyPanel notifications is still circled, can you tell me the code to fix that also?

Thanks

Michael

[Anonymous]

Hi @miguelp,

For footer please try this:
.footer-inner-bottom {
background-color: #000 !important;
}

For Buddypanel,
.left-menu-open .menu-panel ul li a span {
border-radius: 0 !important;
}

Regards

[Michael]

Hi again @pallavi

thank you again for your support, that worked fine.

Next issue im having is with the color of the navigation button of the buddypanel.
If I change my background color for mobile view to white, the navigation button is not visible (is also white), but I cant seem to find the styling for that in the menu of buddyboss. The desktop view,it remains grey but on mobile it is white. How can I change the color for mobile view for this button so it wont be white and invinsible with my background logo color?

Regards

M*

[Michael]

Also @pallavi , im adding CSS classes for the menus , i did it as the tutorial video you have for the buddypanel and worked but when I put css classes for my titlebar menu, it doesnt work – it works for every other menu, footer menu and buddypanel, but icons do not appear in the titlebar menu – please let me know the solution for this also. I’ve attached a photo to show you this problem …

[Anonymous]

Hi @miguelp, Titlebar menu does not support icons. You can use following plugin , hopefully it should work
https://wordpress.org/plugins/menu-icons/

Regards