BuddyBoss Home – Web › Support Forums › Themes › Boss. theme › Icons on mobile title bar

Viewing 9 posts - 1 through 9 (of 9 total)

  • Question

    March 5, 2016 at 12:30 am #61547

    Naji
    @naj

    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

    Answers

    March 5, 2016 at 1:33 am #61550

    Anve S.
    @anve

    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

    March 5, 2016 at 3:16 am #61565

    Naji
    @naj

    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

    March 5, 2016 at 3:28 am #61569

    Naji
    @naj

    … 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!

    March 5, 2016 at 5:00 am #61580

    Anve S.
    @anve

    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

    March 11, 2016 at 10:58 pm #62634

    Naji
    @naj

    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

    March 13, 2016 at 1:36 pm #62807

    Anonymous
    @

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

    Regards

    March 13, 2016 at 4:15 pm #62831

    Naji
    @naj

    hi @pallavi,

    a message counter please,

    would take also the bell counter 🙂 maybe for on use

    thank you

    March 17, 2016 at 5:49 am #63559

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • The question ‘Icons on mobile title bar’ is closed to new replies.