php - 如何调整菜单图标的尺寸

Question

我有这个网站:

http://avocat2.dac-proiect.ro/

如果调整窗口大小，菜单会折叠

当菜单折叠时，希望菜单图标的尺寸更小。

我尝试这样做，但不幸的是，悬停效果被破坏了……悬停图标的位置超出了它应有的位置。

这是 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;
    }

Answer 1

您可以解决此问题并使用 !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 */
}