title: How can I resize the dimensions of the menu icons
body: <p>I have this site:</p>
  
  <p><a href="http://avocat2.dac-proiect.ro/" rel="nofollow">http://avocat2.dac-proiect.ro/</a></p>
  
  <p>If you resize the window, the menu collapses</p>
  
  <p>When the menu collapses want from the menu icons have smaller size.</p>
  
  <p>I tried to do this but unfortunately hover effect is destroyed ... hover icon is positioned elsewhere than it should.</p>
  
  <p>This is code CSS:</p>
  
  <pre><code>   .menu-item a img {
         border: none;
         box-shadow: none;
         vertical-align: middle;
         width: auto; //here take the picture width
     }
  
  @media screen and (max-width: 770px)
  {
     //here should be writing code for the images to be smaller
  }
  </code></pre>
  
  <p>This is code HTML:</p>
  
  <pre><code>&lt;nav class="" role="navigation"&gt;
  &lt;!--            &lt;div class="container-fluid"&gt;--&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="navbar-collapse collapse in" id="bs-navbar-collapse-1"&gt;
  
          &lt;!--            &lt;form class="navbar-form navbar-left" role="search"&gt;--&gt;
          &lt;!--                &lt;div class="form-group"&gt;--&gt;
          &lt;!--                    &lt;input type="text" class="form-control" placeholder="Search"&gt;--&gt;
          &lt;!--                &lt;/div&gt;--&gt;
          &lt;!--                &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;--&gt;
          &lt;!--            &lt;/form&gt;--&gt;
  
              &lt;a class="screen-reader-text skip-link" href="#content"&gt;Skip to content&lt;/a&gt;
              &lt;div class="menu-menu-container"&gt;
                  &lt;ul id="menu-menu" class="nav-menu"&gt;&lt;li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-6"&gt;&lt;a href="http://avocat2.dac-proiect.ro/" class="menu-image-title-hide menu-image-hovered"&gt;&lt;span class="menu-image-hover-wrapper"&gt;&lt;img width="46" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/HOME.png" class="menu-image menu-image-title-hide" alt="HOME"&gt;&lt;img width="46" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/HOME2.png" class="hovered-image menu-image-title-hide" alt="HOME2" style="margin-left: -46px;"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"&gt;&lt;a href="http://avocat2.dac-proiect.ro/?page_id=17" class="menu-image-title-hide menu-image-hovered"&gt;&lt;span class="menu-image-hover-wrapper"&gt;&lt;img width="67" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/AVOCATI.png" class="menu-image menu-image-title-hide" alt="AVOCATI"&gt;&lt;img width="67" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/AVOCATI2.png" class="hovered-image menu-image-title-hide" alt="AVOCATI2" style="margin-left: -67px;"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"&gt;&lt;a href="http://avocat2.dac-proiect.ro/?page_id=21" class="menu-image-title-hide menu-image-hovered"&gt;&lt;span class="menu-image-hover-wrapper"&gt;&lt;img width="60" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/CLIENTI.png" class="menu-image menu-image-title-hide" alt="CLIENTI"&gt;&lt;img width="60" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/CLIENTI2.png" class="hovered-image menu-image-title-hide" alt="CLIENTI2" style="margin-left: -60px;"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"&gt;&lt;a href="http://avocat2.dac-proiect.ro/?page_id=23" class="menu-image-title-hide menu-image-hovered"&gt;&lt;span class="menu-image-hover-wrapper"&gt;&lt;img width="78" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/ONORARII.png" class="menu-image menu-image-title-hide" alt="ONORARII"&gt;&lt;img width="78" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/ONORARII2.png" class="hovered-image menu-image-title-hide" alt="ONORARII2" style="margin-left: -78px;"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"&gt;&lt;a href="http://avocat2.dac-proiect.ro/?page_id=19" class="menu-image-title-hide menu-image-hovered"&gt;&lt;span class="menu-image-hover-wrapper"&gt;&lt;img width="186" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/DOMENII-DE-EXPERTIZA.png" class="menu-image menu-image-title-hide" alt="DOMENII-DE-EXPERTIZA"&gt;&lt;img width="186" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/DOMENII-DE-EXPERTIZA2.png" class="hovered-image menu-image-title-hide" alt="DOMENII-DE-EXPERTIZA2" style="margin-left: -186px;"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"&gt;&lt;a href="http://avocat2.dac-proiect.ro/?page_id=25" class="menu-image-title-hide menu-image-hovered"&gt;&lt;span class="menu-image-hover-wrapper"&gt;&lt;img width="75" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/CONTACT.png" class="menu-image menu-image-title-hide" alt="CONTACT"&gt;&lt;img width="75" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/04/CONTACT2.png" class="hovered-image menu-image-title-hide" alt="CONTACT2" style="margin-left: -75px;"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;            &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  &lt;!--            &lt;/div&gt;--&gt;
  &lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Can you help me please to solve this problem?</p>
  
  <p>Thanks in advance!</p>
  
  <p>EDIT:</p>
  
  <pre><code> public function menu_image_nav_menu_item_filter( $item_output, $item, $depth, $args ) {
          $attributes = !empty( $item-&gt;attr_title ) ? ' title="' . esc_attr( $item-&gt;attr_title ) . '"' : '';
          $attributes .= !empty( $item-&gt;target ) ? ' target="' . esc_attr( $item-&gt;target ) . '"' : '';
          $attributes .= !empty( $item-&gt;xfn ) ? ' rel="' . esc_attr( $item-&gt;xfn ) . '"' : '';
          $attributes .= !empty( $item-&gt;url ) ? ' href="' . esc_attr( $item-&gt;url ) . '"' : '';
  
          $image_size = $item-&gt;image_size ? $item-&gt;image_size : apply_filters( 'menu_image_default_size', 'menu-36x36' );
          $position   = $item-&gt;title_position ? $item-&gt;title_position : apply_filters( 'menu_image_default_title_position', 'after' );
          $class      = "menu-image-title-{$position}";
          $this-&gt;setUsedAttachments($image_size, $item-&gt;thumbnail_id);
          if ( $item-&gt;thumbnail_hover_id ) {
              $this-&gt;setUsedAttachments($image_size, $item-&gt;thumbnail_hover_id);
              $hover_image_src = wp_get_attachment_image_src( $item-&gt;thumbnail_hover_id, $image_size );
              $margin_size = $hover_image_src[1];
              $image = "&lt;span class='menu-image-hover-wrapper'&gt;";
              $image .= wp_get_attachment_image( $item-&gt;thumbnail_id, $image_size, false, "class=menu-image {$class}" );
              $image .= wp_get_attachment_image( $item-&gt;thumbnail_hover_id, $image_size, false, array(
                  'class' =&gt; "hovered-image {$class}",
                  'style' =&gt; "margin-left: -{$margin_size}px;",
              ));
              $image .= '&lt;/span&gt;';;
              $class .= ' menu-image-hovered';
          } else {
              $image = wp_get_attachment_image( $item-&gt;thumbnail_id, $image_size, false, "class=menu-image {$class}" );
              $class .= ' menu-image-not-hovered';
          }
  
          $item_output = "{$args-&gt;before}&lt;a{$attributes} class='{$class}'&gt;";
          $link        = $args-&gt;link_before . apply_filters( 'the_title', $item-&gt;title, $item-&gt;ID ) . $args-&gt;link_after;
          switch ( $position ) {
              case 'hide':
                  $item_output .= $image;
                  break;
              case 'before':
                  $item_output .= $link . $image;
                  break;
              case 'after':
              default:
                  $item_output .= $image . $link;
                  break;
          }
          $item_output .= "&lt;/a&gt;{$args-&gt;after}";
  
          return $item_output;
      }
  </code></pre>