The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Proportional Circular Badges

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #208393


    I am trying to create circular badges on my menu items, while keeping the width and height of the badge proportional to the amount of text.

    My styles seem overly complicated for such a simple task and I am hoping there is a way to achieve this without using jQuery, maybe just adding some extra markup.

    So looking for some advice to approaching a problem like this, pure CSS solution if possible.

    Take a look at what I have so far in this codepen example.



    Thanks Paul

    Well I guess jQuery will have to do then, and I agree don’t see another way. The numbers are grabbed by PHP and added to localized JS vars.

    Wondering how they do it on iPhone apps, like the email or message apps that have that circular badge next to the app icon. Probably like you said either adjust font size of they increase in size if the number gets into 3 digits. Personally though I think it looks better than using a rectangle.



    That works great thanks for taking the time. I think 3 digits won’t show too often so isn’t that big a deal. If you think the styles can be further streamlined let me know. The markup for the ‘span.count’ can be adjusted to anything.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.