Add custom class to menu-item container if has image

  • Resolved klihelp

    (@klihelp)


    11 years, 5 months ago

    Can you add a has-icon class name to the main menu item?

    Something like:

<li id="menu-item-99" class="menu-item has-icon">
	<a href="https://twitter.com">
	<img width="30" height="30" src="../twitter.png" alt="Twitter" title="Twitter" />
	</a>
</li>

    `
    It would help us to manage padding and margin settings if menu image added.
    Thanks for the great plugin!
    https://www.ads-software.com/extend/plugins/nav-menu-images/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter klihelp

    (@klihelp)

    Add the has-icon class right after the image check:

    public function register_menu_item_filter( $item_classes, $item, $args ) {
  if ( has_post_thumbnail( $item->ID ) ) {
    // Add has-icon class
   $item_classes[] = 'has-icon';
 ..

    This works. Please consider adding it to the plugin core.

    Plugin Author Milan Dini?

    (@dimadin)

    I will consider this in future releases. For now, you can easily add this using filter nav_menu_css_class and seeing how function Nav_Menu_Images::menu_item_content() works.

    Plugin Author Milan Dini?

    (@dimadin)

    I added this in version 3.2 though I’ve called class has-image. Thanks for your suggestion!

    Thread Starter klihelp

    (@klihelp)

    Thank you for this useful update.

    I tried using the .has-image class, however, it still adjusted my entire nav menu, instead of just the image item which I needed to adjust.

    Is there a good solution to this problem?

    I need to move the featured image up a few pixels while keeping the other menu links in the same place.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Add custom class to menu-item container if has image’ is closed to new replies.