如何使此导航菜单响应迅速(我的意思是社交图标)

Question

这是网站：www.practicalized.com

这是移动版本现在的外观。

这就是我希望它看起来像。

tha nav菜单是由WordPress主题生成的，但是社交图标是由我的一个朋友创建的。

这是标记：

<div class="social-media-icons" style=" float: right; margin-top: -30px;">
        <a href="https://www.facebook.com/Practicalized-264476844086337/" target="_blank" style="margin-right:4px;">
            <img src="http://localhost/practicalized/wp-content/uploads/2018/02/facebook-1.png" width="30" height="30">
        </a>
        <a href="https://twitter.com/Practicalizedx/" target="_blank" style="margin-right:4px;">
            <img src="http://localhost/practicalized/wp-content/uploads/2018/02/twitter-icon-1.png" width="30" height="30">
        </a>
        <a href="https://www.instagram.com/practicalized/" target="_blank">
            <img src="http://localhost/practicalized/wp-content/uploads/2018/02/instagram-icon-1.png" width="30" height="30">
        </a>
    </div>

Answer 1

从.social-Media-icons

中删除内联样式

并将其添加到您的CSS中。我假设对图标中心的期望仅用于移动，而不是桌面

 .social-media-icons {
   float:right; 
    margin-top: -30px; 
 }
 @media only screen and (max-width: 990px) {
    .social-media-icons {
      text-align: center;
      float: none;
      margin-top: auto;
    }
 }