Category descriptions in menus

  • I’ve found that menu items created from Categories contain descriptions when they’re available. This is element with class wpbf-menu-description.

    See my link – header menu under BLOG for example. Without my intervention, the Category description appeared within the submenu which does not look good and is confusing.

    I could hide it with css if all else fails, but I’m wondering if there’s any way to use it. I tried to style the description to appear as a tooltip, but I find that only the description of the first item within the submenu is visible no matter which submenu item is being hovered over. I could refer to them by id but that wouldn’t be dynamic and would require maintenance whenever menu items change and I’d rather avoid that.

    Any ideas?

    For reference, css I’m using:

    .menu-item .wpbf-menu-description{
  font-family:"Open Sans";
	font-variant: 300;
	font-size:small;
	visibility: hidden;
	width: 300px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px ;
  position: absolute;
  z-index: 1;
  bottom: -50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
}

.menu-item:hover .wpbf-menu-description{
  visibility: visible;
  opacity: .9;
}

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author David Vongries

    (@davidvongries)

    Hi @cyberkitto,

    you’re right. We do allow for menu item descriptions but don’t have a specific styling in place for them.

    Honestly, there’s never been many requests for that & we weren’t 100% sure what default design we should provide for these so we kept it like that.

    I just tested your solution and think it’s great!

    We may add something like this to core at some point in the future.

    Best,
    David

    Theme Author David Vongries

    (@davidvongries)

    Also, the CSS worked fine for me, even for multiple menu items with descriptions.

    You can try this instead though:

    .menu-item > .wpbf-menu-description{
  font-family:"Open Sans";
	font-variant: 300;
	font-size:small;
	visibility: hidden;
	width: 300px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px ;
  position: absolute;
  z-index: 1;
  bottom: -50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
}

.menu-item:hover > .wpbf-menu-description{
  visibility: visible;
  opacity: .9;
}
    Thread Starter Maria C.

    (@cyberkitto)

    Your solution helps with the tooltip being stuck. Thank you.

    However, only the first item’s description comes up for me even though I gave a description to each of those three categories.

    Any ideas why?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Category descriptions in menus’ is closed to new replies.