Support only during business hours : Monday to friday, from 8:30 am – 5:30 pm CEST

Due to the decrease in our staff due to vacations, our response time may be longer.

Be sure we're doing our best to manage your topic as soon as possible.

Number bubbles applied to menus

This topic is resolved
Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    The (1) and (2) blue bubble. How can this be applied as a CSS class for menu items?

    Hopefully this is possible 🙂

    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    Hi @abourne,

    Unfortunately, this code doesn’t exist as a separate CSS class that you could apply to your menu…

    Could you tell us where is the menu that you wish to customize? This way, we’ll better understand your request and find a way to point you to the best solution.

    Thanks.

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    Wish to apply it to grimlock menu. See attached.

    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    Hi @abourne,

    Please add the following code snippet to your website:

    .number-bubble:before {
        content: '1';
        display: inline-block;
        background-color: #4885ed;
        color: #fff;
        font-weight: 700;
        font-size: 1.2em;
        border-radius: 500px;
        position: absolute;
        top: 8px;
        left: 0px;
        width: 43px;
        height: 43px;
        text-align: center;
        line-height: 2.2em;
    }
    
    .number-bubble--2:before {
    	content: '2';
    }
    
    .number-bubble--3:before {
    	content: '3';
    }

    To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.

    Then, you can add the number-bubble CSS class to each menu item. To display the number 2 instead, please make sure to add also the number-bubble--2 class. And the same goes for the number 3.

    It should do the trick for you. ?

    All the best,

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    When I apply css into customiser, then add number-bubble as CSS class for menu item, it outputs the ‘1’ on each item only.

    When I use class on menu item number-bubble--1 and same for for 2 and 3, it has no output, only a ‘number’ above menu item appears – see attached.

    This was tested for only three menus. I did add up to number 6 and tried to apply to six menu items, this did not work either – see attached

    Only output that works is with the number-bubble class, but this makes each menu item number 1. Not sequenced. How to make it sequenced properly?

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    Been trying to figure it out all day. Caused some issue in the process, as attached. Please instruct me on what to do to resolve this placement and colour issue..

    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    Hi @abourne,

    You didn’t break anything. We have updated the theme (Gwangi + child themes) and our Grimlock plugin. Make sure you have the latest versions, this should solve the problem for the register page.

    Then can you send us the link of the page on which you want to create this menu with the bubbles? In this way we will check how to make it.

    Thanks in advance.

    Best regards,

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne
    This reply has been marked as private.
    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus
    This reply has been marked as private.
    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    Okay. Thanks for the update. Cheeers, Alex

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    Following on… I think my theme is updated already.
    I have the Envato plugin and my API link works just fine.
    I recall updating the theme via Envato a day or two ago.
    So, with an up to date theme… why does the UI of number bubbles on registration and on 404 error page now inherit original gwangi red colors, per the query of this topic.

    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    Hi @abourne,

    After taking a look on your website, I noticed the Gwangi Youth child theme needed to be updated, so I went ahead and updated it for you. However it seems like the color issue is still not resolved, so we will take a closer look to see if this is an issue with the theme then get back to you.

    For the number bubble that you want to display on your menu item, here is how it should be used:

    • To display number 1, add number-bubble in the menu item class
    • To display number 2, add number-bubble number-bubble--2 in the menu item class
    • To display number 3, add number-bubble number-bubble--3 in the menu item class
    • etc…

    In summary, you need to add both number-bubble and number-bubble--X, except for the number 1.

    With the snippet we provided, you can only display up to number 3. If you want to add more numbers, you will have to copy and paste this snippet in your custom CSS and replace X by the desired number:

    .number-bubble--X:before {
    	content: 'X';
    }

    Regards

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    Hello,

    I really appreciate your generous support. Thanks a million for going out of your way 🙂

    I applied CSS successfully. Is there any way to make the bubble appear in front, not behind?

    I am using the grimlock ‘blocks’ layout. See attached for reference.

    Regards Alex

    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    Hi @abourne,

    • Regarding the color issue, we have determined that is an issue from Gwangi and it will be fixed in the next update. In the meantime, you can use this CSS snippet to fix the bubbles color in your register page:
      .buddypress.register .bp_register #register-page #signup_form .register-section:before {
         background-color: #4885ed !important;
      }
    • Here is the updated CSS snippet to display the bubbles in front:
      .number-bubble:before {
          content: '1';
          display: inline-block;
          background-color: #4885ed;
          color: #fff;
          font-weight: 700;
          font-size: 1.2em;
          border-radius: 500px;
          position: absolute;
          top: 8px;
          left: 0px;
          width: 43px;
          height: 43px;
          text-align: center;
          line-height: 2.2em;
          z-index: 9;
      }

      Please replace the old one by this updated snippet

    Regards

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    You’re the best. Solved and resolved. No further queries.
    Regards Alex

    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    You’re welcome. ?

    Best regards,

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

The topic ‘Number bubbles applied to menus’ is closed to new replies.

Troubleshooting Demo Imports

You're trying to setup your theme but you're experiencing errors when importing the demo content? Or you've just followed the setup guide but your website doesn't look exactly like our demo? These are common issues for which you can find easy and quick fixes.

Happy With our Support So Far?

Feel free to review our theme on Themeforest! It helps us making our products more known to new potential customers, which allow us more time to improve the quality and develop new features. #SharingIsCaring ❤️

Discover MatchPress

Skip • Like • Super-Like

Add powerful matching features like Member likes, skips, super likes, conditional private messaging and much more.

Setup Your Cera or Gwangi powered Community Website and Turn it into an iOS and Android App

15% discount for Cera users

To unleash the full power of your Cera or Gwangi theme, we have partnered with the Zipline team. Your community website can now be fully setup and turned into your very own custom app for iOS and Android.

Whether you've newly acquired the theme or already got your site up and running, Zipline got you covered. And we got you an incredible discount.

Holiday, Weather & Festive effects
to pimp your WordPress Site