Nav Menu Images

Nav Menu Images is a WordPress plugin (download) that enables uploading of images for nav menu items on a menu edit screen. By default, those images will be displayed instead of text for respective menu items. Note that after upload, you should set an image as featured to be able to display it.

You can also set images that will be displayed only when you hover menu item, or when menu item is of currently displayed page.

How to use

If you have just created menu, or you have just added new menu item, you need to save menu first before you can upload menu item image.

Save menu before uploading

Save menu before uploading

When menu is saved, expand menu item you want to upload image to by clicking on the arrow on the right. This will reveal additional options and a link for image uploading.

Link to upload form on nav menu item’s edit screen

Link to upload form on nav menu item’s edit screen

When media modal opens up, make sure that you list only images uploaded to that menu item. Do this each time you want to change or upload image.

Select "Uploaded to this post"

Select “Uploaded to this post”

When you upload image, just click on a button “Set featured image” to make it menu item image.

Setting featured image from media modal screen

Setting featured image from media modal screen

When you set image as featured, you will be returned to default menu managment screen where you can see links for removing and changing of menu item image.

Link for changing menu item image is also used when you want to upload image that is used for hover or when menu item is active.

Uploaded image on nav menu item’s edit screen

Uploaded image on nav menu item’s edit screen

If you want to upload image for hover or active, change tab to upload new images and upload image you want.

Upload additional images

Upload additional images

When image is uploaded, make sure that only that image is selected in the list from the left side. After you select it, scroll down at sidebar “Attachment details” until checkbox “Used on hover?” is visible and check it if you want to use that image on hover.

Select image for hover

Select image for hover

If you want to add image to show when menu item is active, follow procedure from above for adding hover image, and only check “Used when active?” checkbox.

Select image for when active

Select image for when active

If you want to remove image used for active or hover, just uncheck it or delete it.

For developers

Developers can use many available filters to make their own way of displaying images, or even create a child class on top of base one. Read a detailed guide for developers.

Although this plugin displays uploaded images out of the box, it will probably not give best possible look, so it’s recommended to create custom CSS styles for affected elements.

I need feature X, will you help me?!

I’m very aware that many users need functionalities or custom solutions that aren’t available out of the box, but I can’t provide free support or custom development for your needs. If you need something like that, I’m available for hire and I can look at your problem and solve it for a fee. This will help continuous maintaining of this plugin for general usage.

Credits

Nav Menu Images code is partly based on a code from now defunct plugin Custom Menu Images by Anabelle Handdoek/∞manos s.a.s and a code from plugin Metronet Profile Picture by Ronald Huereca/Metronet Norge AS.

If you are translator, you can translate it to your language and send translations. Currently, only Serbian translation is available.

Nav Menu Images is released under the terms of GNU General Public License. It is completely free so if you find it useful you can give something back to author. Your help could be done by giving donation, translating plugin to your language, sending bugs and suggestions, promoting plugin in blogs, forums social networks, and other websites.

116 responses to “Nav Menu Images”

  1. shoy


    I have error in menu- “Missing argument 3 for Nav_Menu_Images::register_menu_item_filter() (path to my page) on line 195″ what did I do wrong? This error occurs immediately after loading the plugin

    1. Henk


      Same kind of problem, but a bit awkward:
      On http://www.larmit.nl/caresse I get:
      PHP Warning: Missing argument 2 for Nav_Menu_Images_Admin::_wp_post_thumbnail_html() in E:\larmit.nl\wwwroot\caresse\wp-content\plugins\nav-menu-images\inc\admin.php on line 131

      On http://www.caresseboxsprings.nl it works fine! (this site is not visible yet.)
      Exactly the same sites, both with WordPress 3.4.2

      1. Henk


        Hi, just overwritten the plugin with the first version (‘Can you, please, try this version…’ ) with ftp. Seems to work ok now!

        Tnx, Henk

      2. Henk


        Hm, it’s the 1.0 version again. Only difference between my two sites is that I have got the All-in-one-seo-plugin installed at the site with 2.0.

        Grtz Henk

  2. Miha


    Would it show the image and description text… like text under the image?

    If not it would be great to have an option to show image and text together..

    great work!

    Pozdrav!

  3. Chris Hickman


    Turn off automatic swapping of title for image in functions.php:
    add_filter('nmi_filter_menu_item_content','__return_false');

    OR — have image appear BEFORE text in functions.php:

    add_filter( 'nmi_menu_item_content', 'nmi_custom');
    function nmi_custom( $content) { return $content; }

    … and then you can use CSS to disable images on all menus, except those you want…

    .menu .wp-post-image { display: none }
    #menu-dashboard-resources.menu .wp-post-image { display: block }

    In my case, the same menu appeared in the sidebar and did not NEED images there.

    1. juliette


      Hi, thanks for this great plugin.
      I try to let the text below or above the images related to the titles by adding this code in functions.php, but I can’t… I use the basic theme Twenty Eleven, do you have any idea?
      Thanks for your answers…

  4. pasfor74


    An idea for you. I don’t know if it’s easy, but can you modify this plugin allowing to upload two pictur for every page: the first one for the menu and the second one for the menu in modality OVER???

  5. nigel


    neat plugin. shame I’ve no idea how to add the page title with the nmi_menu_item_content filter :(

  6. ramin


    Okay guys I want the image to display before my text in my menu how can i do that I don’t really want to mess with functions.php but if i have to which functions.php are we talking about. are we talking about the one in child theme? and also for something like this how would the css code look like if I may ask I am a beginner trying to learn. please help.

  7. marinazar


    I have social media icons in the header inline. When you reach the homepage on a mobile device you select pages from a popup with radio buttons. However, for the 3 links that are icons/images the radio buttons are present but have no label:

    http://www.optometricinsights.com

    Again, this is on mobile device only. Same scenario for FF, Android default browser and Opera.

    Thanks in advance for any help!

  8. Stefano


    Hi Milan and thanks for the plugin.
    I’m using it on an Artisteer generated theme and, unfortunately, there is a big issue: images won’t show.
    I first used the plugin via WordPress INSTALL NOW page – no results and main menu is missing from screen; then I tried the nav-menu-images-1.zip, again no results and missing main menu.
    Then I tried nav-menu-images-2.zip: this time menu appears as planned, but no images, only the original text link.

    Do you think this could be something somehow related to Artisteer?

    Stefano

  9. Fatih Kalyoncu


    Error “You need to set an image as a featured image to be able to use it as an menu item image”

    ?? Help me

  10. Carlos


    Nav Menu Images. Great. Awesome. No other plugin like it.

    But, it does not work with the “Better WP Security” plugin which changes the path of the wp-content folder for security reasons. The path to the uploaded image will generate a 404 error. It may not work in a Multi-Site installation either?

  11. edward


    I have the similar problem with “You need to set an image as a featured image to be able to use it as an menu item image”. could you please tell me how to change images to featured image. i have read your tutorial, but i still couldn’t get it changed to a featured image. thanks.

    1. edward


      HI Milan,

      I have checked it again. normally there should be an option as “use as featured image” but there was this option next to the “insert into post”. Is there any other way to set the upload picture to feature image? I use PNG format.

      Thanks
      Edward

  12. Mat


    Hey,

    thanks for you great plugin!

    I would like to display a different image when you are on a particular page (so if you click on “Home” for example, it should be highlighted or underlined) – so you can see what page you are currently on.

    Example: http://jakobgasteiger.com

    Is this possible?

    regards
    Mat

  13. Chris


    Thanks for the plugin. Just wondering how to customize the position of the icon on the menu. I need to move the image up. I figure it has to do with the css but an example would be appreciate…or if I can simply edit one of the plugin php files.

    Thanks again

    1. Chris


      I created a custom css class with the following and it worked.

      .menu li.ICON {
      position:relative;
      top:-25px;
      }

  14. stuart


    Hello

    great plugin

    My question is with file should i change to integrate it in my theme instead of using it as a plugin ??

    thanks and great plugin agian

  15. Maciej


    Hi, great work with this plugin but I’ve got a problem.. everything was working fine while I was creating my custom menu, the “upload image” button was showing with no problems but suddenly when I created the third button, the field “upload menu item page” vanished and never came back.. Do you have any issue?

  16. Russ


    Thanks for your nice plugin.

    I’m using wp 3.5.1 and Elegant Themes’ Lucid theme.

    I installed your nice plugin but the upload image option isn’t showing up when expanding the menu item.

    What could be wrong? I’ll donate 10 if you help me fix it.

    Thanks!

    Russ

  17. Jesse


    I am having the same issue as the first commenter. I am getting this message

    :Warning: Missing argument 3 for Nav_Menu_Images::register_menu_item_filter() in /home/content/j/a/b/jaboostudios/html/wordpress/wp-content/plugins/nav-menu-images/nav-menu-images.php on line 198

    I want to have an image of the Like US on Facebook logo but this error message keeps coming up ?!?!?

    PLEASE HELP I AM VERY CONFUSED

  18. Splendid Angst


    How can I allow the image to appear next to the name of the menu item?
    I see this just replaces the name itself, but I’d like to be able to display the name as well as the image.

    Is this in the php or css?

  19. Serge


    I like your plugin, but for some reason when viewing the site in a mobile browser (iphone or android) not only the images disappear but there is not a label showing up either.

    Can you suggest a solution/work around? has anyone else encountered this problem?

  20. Wanjiru


    I would like my image to change to another image on hover/click, how do i go about that?

    1. Wanjiru


      How do I upload two different images on one menu example (about us) so that when a person click/hover on the tab it changes to another image.

    2. Wanjiru


      How do i activate the hover effect on the menu. how to upload to images to make them change when a tab is active

    3. Wanjiru


      i have tried displaying both image and title but its not working, only the page title or image is displayed alone

  21. Vivek Nath.R


    I’m getting 500 Internal server error after uploading a menu image. I tested this in my test blog and its using Swift theme. Please fix this issue.

  22. Kasper Meinema


    Hi Milan,

    I am trying to use the new feature(hover and active) but when i select another picture to be used as the hover or active picture, it only shows the image i selected to use as hover/active.
    Is extra coding needed to fully use the new feature or should it work instantly?

    Greetings, Kasper

  23. LenW


    Using WordPress 3.5.1, a theme developed with Artisteer 4.1 and Nav Menu Images 3.0. I get the following error message in the menu widget of the vertical nav panel. The top nav panel renders as expected. All I have done is install and activate the plugin, I have not yet added any images.
    Nav_Menu_Images::register_menu_item_filter() in /web/docroot/…………./htdocs/cc/wp-content/plugins/nav-menu-images/nav-menu-images.php on line 268.
    (note I have removed the domain from the error message file path for security reasons).
    This appears not to be an isolated case from reading this blog and the support area on the WordPress website. I don’t want to be editing core files to fix this, can you please sort the plugin.
    Thanks

  24. Denise


    Hello – I am having trouble like others with the hover function… sorry to be dense and thanks for the plugin which is just what I needed! I seem able to set an image but can’t see a hover option. I have downloaded version 3.0. Thanks for any help you can offer
    Denise

  25. Denise


    Hi – no I really don’t see checkboxes for hover/active. I don’t have anything on the right under the box ‘Description’. I’m wondering if it’s because I’m on a PowerPC iMac – have you heard of any other people with a problem seeing the hover options? Thanks

    1. Lee


      Sorry for jumping in here but I might have the answer: which version of WordPress are you using? The active/hover checkbox shows in the new media uploader used by WP 3.5.x. The checkbox is at the right hand side of the uploader (becomes the media manager once the file is uploaded) when an image is selected (ticked); there is a vertical scrollbar on the right-hand-side of the screen, you will need to scroll it down.

  26. Lee


    Hi Milan, thank you for adding hover images. It’s a great enhancement. I am having difficulty using them, though, because the hover image selected for one menu item seems to be the one that shows on hover for all tabs in the menu. I’ve tried removing all images then reuploading and choosing them again…. but nothing seems to help.

    I’m using WP 3.5.x and the Genesis theme framework with the Dynamik child theme.

    Could you add separate upload buttons to the menu editor? I think that might make it easier (more intuitive) to set both the active and hover images for each menu tab.

    Thank you, Milan. By the way, where’s your donate button?

  27. Paul Keene


    Hi there,

    My site is using this plugin to control the main customer navigation and unfortunately the images are not showing in IE8 (Internet Explorer 8). Is there something I am missing that I need to do?

  28. creation


    Hello

    your plug-in very great, but only in responsive display (for iphone or android phone) the image don’t display?
    i have the Eprom theme
    if you have the solution, i keep!

    Thank you

  29. aries brooker


    Hi Milan,

    I’ve just added two buttons using your plug in…and they are displaying vertically. Can you help on how to get them to go horizontally?

    Many thanks,

    Aries

    http://s458388316.onlinehome.fr

  30. dot


    Hello,

    I uploaded images with transparent backgrounds, but when using your plugin they always appear with a white background. How can I change this?
    I’ve tried putting: background: transparent !important; in the CSS classes area but no luck. Very newbie, so if there is any easy fix, please tell me exactly what to put and where.
    Thanks – once that’s fixed the plugin will be perfect!

  31. Matt


    Hello, I am also having trouble with the hover images for the Nav Menu Images plugin. I upload the images, I set one to featured, and I check the hover checkbox for another, but nothing happens once I save the menu. I am using WordPress 3.5.1.

  32. Rosanna


    I installed this plugin a week or so ago and it was working perfectly up until today. I don’t know what changed. I don’t have any new plugins and I haven’t updated anything. As of today, I get an error that reads “Warning: Missing argument 3 for Nav_Menu_Images::register_menu_item_filter() in /homepages/28/d451937599/htdocs/app464104963/wp-content/plugins/nav-menu-images/nav-menu-images.php on line 268.” I looked at the PHP and found that line 268 is “public function register_menu_item_filter( $item_classes, $item, $args ) {” but I don’t know what that means (I have no experience with PHP).

    I have tried downgrading to both your previous versions, but I still get the same error. Any other suggestions?

  33. the1kane


    How do I add the hover images? I didnt see the option in the menu tabs. I am running the latest version of wordpress and pagelines.

  34. Tinsley


    To fix the ‘Nav_Menu_Images::register_menu_item_filter()…’ issue:

    -Locate the register_menu_item_filter method in nav-menu-images.php (line 268 at the time of this post).
    -Set a default value for the $args parameter (ie $args = null).

    public function register_menu_item_filter( $item_classes, $item, $args = null ) {

    It seems only a select few people are having this issue and I’m not sure under what circumstances it occurs. The above seems to resolve the problem without any side effects. $args isn’t referenced in that function so setting it to null doesn’t break anything.

  35. Tubb


    Hi Milan,
    thank you for your plug in, but i’ve trouble with margin of menu image, i’d like to set margin-top = 0 px of the menu bar , i’ve no idea to edit in (nav-menu-images.php) or i’ve to edit in the theme setting?
    thank you for your help.
    Regards,

  36. Rosane


    Hi Milan,

    your plugin seems like the perfect solution for my problem! Thanks!

    I’m working on a website based on an Artisteer generated theme. Everything works fine but the pictures are not showing up on menu. I’m also not seen the hover option box. Is there a way to fix this issue?

    Thanks in advance

    Rosane

  37. Paul


    Edit nav-menu-images.php

    in function register_menu_item_filter comment out $args

    public function register_menu_item_filter( $item_classes, $item /*, $args*/ )

    no more

    Missing argument 3 for Nav_Menu_Images

  38. learning2


    I’m having issues with the hover and active images. Even if I delete, upload or upload individually for each menu item, the hover and active images are changing to be the last image’s hover and active state that I just modified for a different menu item.

    I’d really like to utilize this. I still have some modifications to make for the css.

    Hope I can resolve this, otherwise, I’m moving out of WordPress because its so darn difficult to modify – especially compared to the WordPress versions from about 4 years ago.

    1. Paul


      When editin link in menu
      1.Change menu item image
      2.Set Hover image and Avtive image
      3.Set Featured image
      4.Save Menu
      5.Edit next link in menu

      When editin multiple links without saving menu, hover image will be the same for all links

      1. learning2


        I tried this but it still didn’t work for me. The last modified menu image’s state for hover is spread to all the other menu items…

        View Source reveals that the hover_06 is spread to all other item’s hover:

            <nav id="site-navigation" class="main-navigation" role="navigation">       <h3 class="menu-toggle">Menu</h3>       <a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>       <div class="menu-2013-spring-container"><ul id="menu-2013-spring" class="nav-menu"><li id="menu-item-649" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-649"><a href="http://localhost/wordpress/"><img width="105" height="70" src="http://localhost/wordpress/wp-content/uploads/active_01.png" class="attachment-full wp-post-image" alt="Home" title="Home" /></a></li> <li id="menu-item-648" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648"><a href="http://localhost/wordpress/about-us/"><img width="132" height="70" src="http://localhost/wordpress/wp-content/uploads/default_02.png" class="attachment-full wp-post-image" alt="About Us" title="About Us" onmouseover="this.src=&#039;http://localhost/wordpress/wp-content/uploads/hover_06.png&#039;" onmouseout="this.src=&#039;http://localhost/wordpress/wp-content/uploads/default_02.png&#039;" /></a></li> <li id="menu-item-643" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-643"><a href="http://localhost/wordpress/appointments-exams/"><img width="168" height="70" src="http://localhost/wordpress/wp-content/uploads/default_03.png" class="attachment-full wp-post-image" alt="Appointments &amp; Exams" title="Appointments &amp; Exams" onmouseover="this.src=&#039;http://localhost/wordpress/wp-content/uploads/hover_06.png&#039;" onmouseout="this.src=&#039;http://localhost/wordpress/wp-content/uploads/default_03.png&#039;" /></a></li> <li id="menu-item-644" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-644"><a href="http://localhost/wordpress/frames-and-contact-lenses/"><img width="125" height="70" src="http://localhost/wordpress/wp-content/uploads/default_04.png" class="attachment-full wp-post-image" alt="Frames &amp; Lenses" title="Frames &amp; Lenses" onmouseover="this.src=&#039;http://localhost/wordpress/wp-content/uploads/hover_06.png&#039;" onmouseout="this.src=&#039;http://localhost/wordpress/wp-content/uploads/default_04.png&#039;" /></a></li> <li id="menu-item-646" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="http://localhost/wordpress/technology-health/"><img width="169" height="70" src="http://localhost/wordpress/wp-content/uploads/default_05.png" class="attachment-full wp-post-image" alt="Technology &amp; Health" title="Technology &amp; Health" onmouseover="this.src=&#039;http://localhost/wordpress/wp-content/uploads/hover_06.png&#039;" onmouseout="this.src=&#039;http://localhost/wordpress/wp-content/uploads/default_05.png&#039;" /></a></li> <li id="menu-item-645" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-645"><a href="http://localhost/wordpress/news/"><img width="96" height="70" src="http://localhost/wordpress/wp-content/uploads/default_06.png" class="attachment-full wp-post-image" alt="News" title="News" onmouseover="this.src=&#039;http://localhost/wordpress/wp-content/uploads/hover_06.png&#039;" onmouseout="this.src=&#039;http://localhost/wordpress/wp-content/uploads/default_06.png&#039;" /></a></li> <li id="menu-item-647" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647"><a href="http://localhost/wordpress/contact-map/"><img width="145" height="70" src="http://localhost/wordpress/wp-content/uploads/default_07.png" class="attachment-full wp-post-image" alt="Contact &amp; Map" title="Contact &amp; Map" onmouseover="this.src=&#039;http://localhost/wordpress/wp-content/uploads/hover_06.png&#039;" onmouseout="this.src=&#039;http://localhost/wordpress/wp-content/uploads/default_07.png&#039;" /></a></li> </ul></div>    </nav>                  <!-- #site-navigation -->

        1. Paul


          That’s realy weird

          Try this method

          1.phpmyadmin>>wordpress_db>>wp_postmeta

          search for _wp_attached_file and find all hover_06.png

          my example
          _wp_attached_file 2013/07/n150_n.png <- Normal / Active
          _wp_attached_file 2013/07/n150_h.png <-Hover

          change hover_06 to hover_01 ect

          1. learning2


            I only found one instance for the current hover image. So, knowing that I want different hover images for each menu item, I went and changed it to hover_01.php, and now all the menu items do have that hover_01.png versus hover_01, hover_02, hover_03, etc.

            I thought my menu name could have affected it since the name began with a number – a no, no for wordpress – but that change didn’t help either.

            So, I don’t know what’s up but it looks like I should code all the menu items individually with CSS.

            Thank you for your time and efforts. I was looking forward to using your plugin so it would be easy to change the menu every season. Maybe next time.

            Best Regards!!!!

            1. Paul


              Your welcome, but that’s not my plugin.

              1. learning2


                Paul, thank you for sharing your time with me. I really appreciate your efforts.

                I figured my issue out!!! All I had to do was make sure all my images had the same height! I was making images that were larger for the hover, smaller for the active and smaller still for the default. I just put all my images on the same sized transparent background. Presto! Everything worked well.

                So, the plugin is very good, does work and provides a great menu!

                Thank you, Milan Dinić. I’m off to give your plugin a 5 star rating at WordPress.Org…

  39. Ben


    Hi,

    I have a theme which has a mobile option, but when I use nav menu images they appear as blank. Is there a way to turn off nav menu images for certain resolution css themes?

    Thanks,

    Ben

  40. Sol


    I think you need to preload images for hover and add sprites support.

  41. Paul


    im useing something similiar to this

    http://stackoverflow.com/questions/11381673/javascript-solution-to-detect-mobile-browser

    to detect mobile browsers and change site from

    http://mywordpressexamplesite.com

    to

    http://m.mywordpressexamplesite.com with custom theme and smaller images ( for navmenu example)

    both sites use same db and something like this to switch themes.

    Or you can use this

    http://wordpress.org/plugins/wp-mobile-theme-switcher/screenshots/

  42. Trout


    Is your Nav Menu Images plugin WP 3.6 ready yet? Seems to me it is not. There are a lot of changes to WP Menus in 3.6.

  43. Andrew Snowball


    I just upgraded to WordPress 3.6 – and all my nav-menu stuff has disappeared. Existing menus with images are okay, but the option to add new custom items has gone !! :[

    ~AS.

  44. Becca


    Other people have asked about the menu items not displaying on mobile devices, and I must say that your response that these questions don’t fall into the category of “free support” is unsatisfactory. You built a plugin that doesn’t work in mobile, straight up. And because it doesn’t work in mobile, I won’t be using it. I would imagine that other people will abandon it as well, given that mobile users account for a large portion of web users.

  45. Andrew Snowball


    Hey, man. Don’t fret the haters. We all know its a cool plugin.

    I just want to know how the URL works… I was hoping that if I supplied it, that’s where you’d go when you click the image – but it seems I have to create page on my site for every menu item… I was hoping to avoid that. I’m using your cool plug-in toe display my client’s suppliers down the right hand side… so we don’t want a page for each on THIS site.

    Am I doing something wrong ?

  46. Andrew Snowball


    umm, I can’t get hover over images to work correctly. I set one but it appears for the other menu item as well. Is this the intended action ?

  47. Andrew Snowball


    PLEASE see my request above…… I realy need to get the URL property working. Can you help please.

  48. Leah


    I am an experienced graphic designer who is fairly new at building web sites, trying to learn as I go. I try to design first, then figure out the technical part of building the site., so I don’t limit myself to only what I know how to do. In this case, I put an image-based menu in the middle of the page. Your plug-in seemed the perfect solution and I have been able to get it to do exactly what I wanted. However, I am having trouble getting the images to align in the navigation blocks. I am not sure if this is a theme issue (using Headway) or if there is some code I need to add to get it right.

Leave a Reply

Comment Guidelines:
  • Fields marked with * are required
  • If you want your picture next to comment, open an account at Gravatar
  • If you want to know if someone replied to your comment, check “Notify me of followup comments via e-mail”
  • You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>