BuddyDev

Search

Counter in BP-navs is not round but oval

  • Participant
    Level: Yogi
    Posts: 1105
    calu on January 20, 2022 at 4:12 pm #42723

    Hi there, for some reason the .bp-navs ul li .count is not round, but it’s roundness depends on the digit inside. If there is only on digit, the circle is oval.

    https://imgur.com/fnF2ZZn

    I have deactivated all CSS, but with same result.

    How can I solve this, so the count circle is perfectly round under all circumstances?

    Regards
    Carsten

  • Keymaster
    Level: Yogi
    (BuddyDev Team)
    Posts: 2934
    Ravi on January 20, 2022 at 6:26 pm #42727

    Hello Carsten,

    Thank you for posting. For a perfect circle, You need an element with the same height and width but in the case of count is it not possible because the count will always be dynamic. So, we can not do much with this.

    Regards
    Ravi

  • Participant
    Level: Yogi
    Posts: 1105
    calu on January 20, 2022 at 11:12 pm #42733

    Hi Ravi, thanks for your reply, the counters in WP Dashboard are perfectly round, and my message count is round as well

    https://imgur.com/SF62l3l

    So it must be possible in some way?

    Regards
    Carsten

  • Keymaster
    Level: Yogi
    (BuddyDev Team)
    Posts: 2934
    Ravi on January 21, 2022 at 5:12 am #42734

    Hello Carsten,

    Thank you for the acknowledgment. Check the following screenshot in this it is showing a little bit of oval shape

    https://www.awesomescreenshot.com/image/20581571?key=dc3a949b749e0e5ef081d82a66ed50a7

    But you can use the min-width property to fix the oval shape for the count with 1 as a value. But as the count increases shape will change to oval

    Regards
    Ravi

  • Participant
    Level: Yogi
    Posts: 1105
    calu on January 21, 2022 at 12:42 pm #42738

    Hi Ravi, thanks for showing this example, you’re right, they are slightly oval as well 😉

    Changing the left right padding of .bp-navs ul li .count helps a lot.

    Regarding the min-width property, what is the unit of the 1 Value?

    Regards
    Carsten

  • Keymaster
    Level: Yogi
    (BuddyDev Team)
    Posts: 2934
    Ravi on January 21, 2022 at 2:38 pm #42741

    Hello Carsten,

    Thank you for the acknowledgment. WordPress uses ’18px’ but it depends on your theme. Try to use this or change it a little bit.

    Regards
    Ravi

You must be logged in to reply to this topic.

This topic is: not resolved