# Message counter hidden behind avatar

**URL:** https://meta.discourse.org/t/message-counter-hidden-behind-avatar/74781
**Category:** UX
**Created:** [25 Noviembre, 2017 06:39 UTC](https://meta.discourse.org/t/message-counter-hidden-behind-avatar/74781 "2017-11-25T06:39:45Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![meglio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meglio/32/71444_2.png) [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [25 Noviembre, 2017 06:39 UTC](https://meta.discourse.org/t/message-counter-hidden-behind-avatar/74781/1 "2017-11-25T06:39:45Z")

</div>

![message-counter-hidden-behind-avatar](https://global.discourse-cdn.com/meta/original/3X/b/6/b65b37d465a2a25d58b2c10c90b688868413e3e2.gif)

As it can be seen, when the toolbar is collapsed, the message counter is hidden behind the avatar.

_Hope I’m not duplicating an existing UX issue report._

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [25 Noviembre, 2017 06:54 UTC](https://meta.discourse.org/t/message-counter-hidden-behind-avatar/74781/2 "2017-11-25T06:54:54Z")

</div>

Sure @awesomerobot can you repro?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [27 Noviembre, 2017 14:43 UTC](https://meta.discourse.org/t/message-counter-hidden-behind-avatar/74781/3 "2017-11-27T14:43:01Z")

</div>

I’m not able to reproduce this; which operating system and browser are you using?

---

<div class="post-metadata">

### Author: ![meglio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meglio/32/71444_2.png) [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [27 Noviembre, 2017 18:13 UTC](https://meta.discourse.org/t/message-counter-hidden-behind-avatar/74781/4 "2017-11-27T18:13:40Z")

</div>

MacOS latest, Google Chrome

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [27 Noviembre, 2017 18:46 UTC](https://meta.discourse.org/t/message-counter-hidden-behind-avatar/74781/5 "2017-11-27T18:46:17Z")

</div>

Ah ok, I couldn’t reproduce it because it was being caused by the discourse-locations plugin.

I submitted a PR to fix the plugin:  
[https://github.com/angusmcleod/discourse-locations/pull/13](https://github.com/angusmcleod/discourse-locations/pull/13)

but if you want to fix it immediately, you can also add this to your site’s custom CSS:

```plaintext
.topic-map .avatars .post-count {
    z-index: 99;
}

```

---

<div class="post-metadata">

### Author: ![meglio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meglio/32/71444_2.png) [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [27 Noviembre, 2017 22:27 UTC](https://meta.discourse.org/t/message-counter-hidden-behind-avatar/74781/6 "2017-11-27T22:27:09Z")

</div>

Oh thank you!

Didn’t event think it might be affect by a plugin like that.

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [28 Noviembre, 2017 01:38 UTC](https://meta.discourse.org/t/message-counter-hidden-behind-avatar/74781/7 "2017-11-28T01:38:30Z")

</div>

This occurred due to conflicting use of the class `.map`. Thanks @awesomerobot. Fixed.

[https://github.com/angusmcleod/discourse-locations/commit/f54d1367b6d16fa8fc0506534696fc4b06b0c611](https://github.com/angusmcleod/discourse-locations/commit/f54d1367b6d16fa8fc0506534696fc4b06b0c611)