我如何可以調整的菜單圖標的尺寸

如果調整窗口的大小，菜單崩潰

當菜單坍塌想從菜單圖標中有更小的尺寸。

我試圖做到這一點，但不幸的是懸停效果被摧毀......懸停圖標位於其他地方比它應該。

這是CSS代碼：

.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 
}

這是HTML代碼：

<nav class="" role="navigation"> 
<!--   <div class="container-fluid">--> 
     <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="navbar-collapse collapse in" id="bs-navbar-collapse-1"> 

     <!--   <form class="navbar-form navbar-left" role="search">--> 
     <!--    <div class="form-group">--> 
     <!--     <input type="text" class="form-control" placeholder="Search">--> 
     <!--    </div>--> 
     <!--    <button type="submit" class="btn btn-default">Submit</button>--> 
     <!--   </form>--> 

      <a class="screen-reader-text skip-link" href="#content">Skip to content</a> 
      <div class="menu-menu-container"> 
       <ul id="menu-menu" class="nav-menu"><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"><a href="http://avocat2.dac-proiect.ro/" class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"><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"><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;"></span></a></li> 
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://avocat2.dac-proiect.ro/?page_id=17" class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"><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"><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;"></span></a></li> 
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://avocat2.dac-proiect.ro/?page_id=21" class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"><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"><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;"></span></a></li> 
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://avocat2.dac-proiect.ro/?page_id=23" class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"><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"><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;"></span></a></li> 
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://avocat2.dac-proiect.ro/?page_id=19" class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"><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"><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;"></span></a></li> 
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://avocat2.dac-proiect.ro/?page_id=25" class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"><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"><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;"></span></a></li> 
</ul></div>   </div><!-- /.navbar-collapse --> 
<!--   </div>--> 
<!-- /.container-fluid --> 
</nav>

你可以幫我解決這個問題？

提前致謝！

編輯：

public function menu_image_nav_menu_item_filter($item_output, $item, $depth, $args) { 
     $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : ''; 
     $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : ''; 
     $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : ''; 
     $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : ''; 

     $image_size = $item->image_size ? $item->image_size : apply_filters('menu_image_default_size', 'menu-36x36'); 
     $position = $item->title_position ? $item->title_position : apply_filters('menu_image_default_title_position', 'after'); 
     $class  = "menu-image-title-{$position}"; 
     $this->setUsedAttachments($image_size, $item->thumbnail_id); 
     if ($item->thumbnail_hover_id) { 
      $this->setUsedAttachments($image_size, $item->thumbnail_hover_id); 
      $hover_image_src = wp_get_attachment_image_src($item->thumbnail_hover_id, $image_size); 
      $margin_size = $hover_image_src[1]; 
      $image = "<span class='menu-image-hover-wrapper'>"; 
      $image .= wp_get_attachment_image($item->thumbnail_id, $image_size, false, "class=menu-image {$class}"); 
      $image .= wp_get_attachment_image($item->thumbnail_hover_id, $image_size, false, array(
       'class' => "hovered-image {$class}", 
       'style' => "margin-left: -{$margin_size}px;", 
      )); 
      $image .= '</span>';; 
      $class .= ' menu-image-hovered'; 
     } else { 
      $image = wp_get_attachment_image($item->thumbnail_id, $image_size, false, "class=menu-image {$class}"); 
      $class .= ' menu-image-not-hovered'; 
     } 

     $item_output = "{$args->before}<a{$attributes} class='{$class}'>"; 
     $link  = $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->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 .= "</a>{$args->after}"; 

     return $item_output; 
    }

來源

2015-04-06 Sz. Erika

嘗試（@media屏幕（最大寬度：770px）{ .menu-item a img {height：30px; margin-left：-10％;} }）類似的，你可能需要更改邊距以使它們居中或其他一些css方法 – Tasos

你的代碼很好，但懸停效果被打破...你試圖把代碼，看看會發生什麼 –

是啊我看到了，不知道爲什麼會發生這種情況，有沒有懸停功能的JavaScript設置可能會導致這個問題的圖標？ – Tasos

可以解決這個問題，並與!important;標記調整您的圖標，像這樣：

.menu-image-hover-wrapper img.menu-image-title-hide { 
    width: 20px !important; 
    height: auto; 
    margin-left: -20px !important; /* Fix for hover effect . This needs to be the same size as the width */ 
}

來源

2015-04-07 01:34:39

我如何可以調整的菜單圖標的尺寸

回答

相關問題