How to add the notifications icon in the top as in the default boss theme

[Leonardo]

Hi Awesome Buddyboss Team!

So, I am one click away from upgrading to this awesome child theme.

I noticed in the demo that the notifications top icon has been removed, and the shopping cart icon is in its place.
Are we able to put both icons in the top?

The notifications icon is way more important for me. How can we activate it on the top? Perhaps the shopping cart icon can show up just when there are products in the basket?

Thanks.

[Alyssa]

@leonardoarias I want to make sure I understand you correctly, can you please post a photo of the difference.

[Leonardo]

@tjchester Please, check the attached image.

What I mean is: I want to have the notifications icon on the top, just as we have in the Boss Theme. In the Social Learner demo, I dont see the notifications icon on the top. I just see the shopping cart icon.

[Alyssa]

@leonardoarias haha, we hide header notifications on the demo. The actual theme has them, no worries there 🙂

[Leonardo]

Awesome 🙂

So, I activated the child theme, and now just the “cart icon” shows up. Where is the option to activate the “notifications icon”? I cant seem to figure that out.

Thanks 🙂

[BusinessPapers]

Leonardo, I think it’s enabled by default. Try collapsing the BuddyPanel on the left side by clicking “menu” icon in the titlebar next to the logo area. On my install, that causes the notifications icon to become visible.

[Alyssa]

@leonardoarias slight chance this is a WooCommerce issue. Do you have WooCommerce installed? Not sure if they replace it or just hide it. Heck, it might even just be a theme function. I’ll have to investigate further.

[Leonardo]

@davejay Hi David. No, its not showing up, even when I collapse the BuddyPanel. But thanks for helping out.

@tjchester Yes, I have Woocommerce installed. And yes, when I “deactivate” Woocommerce, the “cart icon” dissappears and the “notifications icon” shows up. So, the child theme is just displaying one of them at the time. From my perspective, the Notifications Icon is way more important. And, if both icons cant be there (because the space there is tight), I would suggest that we place the “cart” icon next to the “collapse icon” or right next to where the “search icon” is right now. Either way, “notifications icon” should be always on top. So people can easily see whats up.

What you think, TJ Chester? 🙂

[Tom Cheddadi]

@Leonardo, Both the notifications and cart icons will become hidden, as the screen size becomes smaller.
As the screen becomes smaller, we have to abandon some items.
Can you let us know which screen size you have ? Perhaps we need to adjust to slightly smaller screens.
Also, please try it on a larger size screen, it should show perfectly.

Best,
Tom

[Fabiano]

On line 552 from social-learner\css\main.css I updated the code:

@media screen and (max-width: 1332px) {
.woocommerce .header-notifications.notifications {
display: inline; /* DISPLAY WAS SET TO “NONE” */
}
}

============================================================
And about the pop sub menu
customize your css theme with this:

.header-notifications .pop {
top: 45px !important;
}

[Leonardo]

@tomchedd I have a MacBook Pro – Retina, 13.3-inch (2560 x 1600)

My default view is 1280 x 800.

And yes, I just tested zooming out (in Google Chrome) and when I zoom out and the page is just 75% of its real size, then the notifications and the cart icons show up.

When I zoom out to 67%, I can see the 3 icons: updates, notifications, and cart icons.

When I view the site without zooming, I can just see one icon. If Woocommerce is not activated, I see the notifications icon. But when woocommerce is activated, I can just see the cart icon.

So, I understand Tom that, we need to hide some elements as the window becomes smaller. But, I am pretty sure that the resolution I have is pretty average.

What do you suggest, Tom?

Thanks.

[Leonardo]

So, In order to see how the theme responds, I changed my resolution to 1440×900. And still, I just see one icon.

Then, I tested with 1680×1050, and now I can see both icons. (cart and notifications).

Hm, can we make it work with 1280×800? What you think about that, @tomchedd?

[Varun Dubey]

Hello @leonardoarias , i have suggested developers to consider for 1366×768 resolution to display both cart and notification. 1366×768 is most common resolution for desktop version

Regards
Varun Dubey

[Leonardo]

Ok, Thanks @vapvarun. For now, I fixed this issue by implementing the original header.php into the Social Learner Child Theme. So, I have more space for the 2 icons to show up.

[Varun Dubey]

Thanks @leonardoarias, glad it solved your issues 🙂

Regards
Varun Dubey