Question

以下是网站：www.practicalized.com

Here is how the mobile version looks right now.

导航菜单由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;
    }
 }

如何使此导航菜单响应（我的意思是社交图标）？

1 个答案: