Docs

[triplewhat]

How would I go about adding badges to my mega menu

Website address is https://bigdogboutique.com. If you hover on categories in the menu you can see the mega menu. I want to add badges next to a few of the items in the list to grab attention. I have the newest version of X theme and Cornerstone installed.

Thanks in advance!

[Joao]

Hi There,

by badges you mean icons? If yes you can add the icons that ara available on this page:

theme.co/x/demo/integrity/1/shortcodes/icons/

Inspect the icons with your right side button and find the codes that look like this:

<i class="x-icon x-icon-anchor" data-x-icon="" aria-hidden="true"></i> and add beside your Menu Items Labels

Ex:<i class="x-icon x-icon-anchor" data-x-icon="" aria-hidden="true"></i> Home

If you would like to add imges you need to add it like the following example:

<img src="url/smiley.gif"> Home

Hope that helps,

Joao

[triplewhat]

No I mean badges. See picture attached.

[Rad]

Hi there,

I’m not really sure if it’s the button as a whole or just the number counts. They aren’t badges, but what badge do you wish to add? I may able to understand it through that 🙂

Thanks!

[triplewhat]

Well, I want to add a badge like that number that says “hot” or something to grab attention. There are a lot of categories and links in this mega menu and I want to grab attention to certain ones. See pictures. One is of the x mega menu I’m trying to style, and one is of a bootstrap menu I made. Its not X theme.

[Rupok]

Hi there,

Thanks for writing back. It’s bit custom development but I am poiting this for you, kindly follow the steps carefully :

#1. Let’s add a custom class to the menu item you want to show the badge – http://prntscr.com/b9tjrd

If you can’t see the class option for the menu, make sure to enable this from screen options – http://prntscr.com/b9tmls

#2. Then add the below CSS under Customzie > Custom > CSS :

.menu-item.hot >  a::after {
  background: #f27faa;
  border-radius: 3px;
  color: #fff;
  content: "Hot";
  font-size: 12px;
  line-height: 18px;
  padding: 0 5px;
  position: absolute;
  right: 8px;
  top: 9px;
}

So if you menu item have the class “hot” then it will show the badge. Let’s adjust the CSS if needed.

Hope this helps.

Cheers!

[Author]

Posts