Icons on mobile title bar

[Naji]

Hi,

1-Is it possible to have the icons (notifications and profile) showing on the mobile titlebar as they do on the desktop titlebar ?

2-Is it possible to add the message icon with the counter on the titlebar ?

thanks you,

Naj

[Anve S.]

Hi @naj ,

1. This would not be possible because in mobile you dont have much space in titlebar to allow them to be there , that is why they are provided in your buddypanel for better user experience with theme.
2. Add the following css in custom css option in child theme.

 .header-navigation ul li a span.count {
  color: #fff !important;
  display: block !important;
  right: -6px!important;
  top: 3px!important;
}

Regards
Anve

[Naji]

Thank you Anve for the quick answer,

I know for the point 1, and I don’t mind if I’m short of space, will give it the space it needs, will reduce the logo to a sign only.

having the message with a counter is crucial to this specific project I’m working on.

Regards,

Naj

[Naji]

… and also pls the css needed to change the color of the counter, the circle icon in the mobile profile panel (notifications and messages). as it is black on dark grey now … hardly visible

thank you!

[Anve S.]

Hi @naj ,

Try applying following css in custom css option of child theme for styling the counts in mobile view.Replace the ‘red’ and ‘#fff’ with your background color and text color resp.

@media screen and (max-width:481px){
.menu-panel ul li .count {
  background-color: red !important;
  color: #fff !important;
}
}

Also we’ll provide you custom code for adding notification and profile section like desktop in mobile as soon as possible.

Regards
Anve

[Naji]

Hi Anve,

I’m still waiting for your support, as you said”

“Also we’ll provide you custom code for adding notification and profile section like desktop in mobile as soon as possible.”

thank you

Naj

[Anonymous]

Hi @naj, Please let me know do you want message counter in the mobile header or notification counter (bell icon)..

Regards

[Naji]

hi @pallavi,

a message counter please,

would take also the bell counter 🙂 maybe for on use

thank you

[Anonymous]

Hi @naj, Please add this code in your your child theme at same path:
boss/template-parts/header-mobile.php after line no. 31

<a href="<?php echo bp_loggedin_user_domain(); ?>messages/">
      <div class="pall">
      
        <span><?php echo bp_get_total_unread_messages_count(); ?></span>
        
        </div>
   </a>

And few css also:

@media screen and (max-width:475px){
  .pall {
  position: absolute;
  right: 22%;
  top: 18%;
  width: 34px;
}
.pall::before {
  color: #fff;
  content: "\f0e0";
  font-family: fontawesome;
  font-size: 27px;
}
  .pall > span {
  background-color: #f14e56;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  height: 25px;
  left: -16px;
  line-height: 25px;
  padding-bottom: 0;
  padding-left: 8px;
  padding-right: 8px;
  position: absolute;
  top: -7px;
}

Regard