- This topic has 15 replies, 2 voices, and was last updated 6 years, 2 months ago by
.
-
Posts
-
The (1) and (2) blue bubble. How can this be applied as a CSS class for menu items?
Hopefully this is possible 🙂
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.
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-bubbleCSS class to each menu item. To display the number 2 instead, please make sure to add also thenumber-bubble--2class. And the same goes for the number 3.It should do the trick for you. ?
All the best,
When I apply css into customiser, then add
number-bubbleas CSS class for menu item, it outputs the ‘1’ on each item only.When I use class on menu item
number-bubble--1and 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-bubbleclass, but this makes each menu item number 1. Not sequenced. How to make it sequenced properly?
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..
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,
This reply has been marked as private.
This reply has been marked as private.
Okay. Thanks for the update. Cheeers, Alex
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.
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-bubblein the menu item class - To display number 2, add
number-bubble number-bubble--2in the menu item class - To display number 3, add
number-bubble number-bubble--3in the menu item class - etc…
In summary, you need to add both
number-bubbleandnumber-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
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
Screenshot_2018-12-03-Customize-Grow-your-Gym-Gymr
Screenshot_2018-12-03-Customize-Grow-your-Gym-Gymr1
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
You’re the best. Solved and resolved. No further queries.
Regards Alex
You’re welcome. ?
Best regards,
- To display number 1, add
The topic ‘Number bubbles applied to menus’ is closed to new replies.
