Question

当我在移动设备上查看基本的Foundation 5网站时，徽标和导航菜单链接之间存在较大的间距问题。

我确定这是因为我使用了课程“令人兴奋”。（margin-top：105px）用于桌面按下导航菜单以与大横幅图像齐平。

是否有更好的方法来调整我的菜单，以便在移动设备上看起来也不错？（与边缘顶部样式没有空白差距）

非常感谢任何建议！

由于

Answer 1

使用媒体查询强制保证金值。

@media screen and (max-width: 40em) {
    .heady {
        margin: 0 !important;
    }
}

Answer 2

徽标和导航链接之间的间距是因为大6列在小屏幕上占据了100％的空间。使两个列一个接一个地堆叠。试试这个

<div class="large-6 small-6 columns">
        <a href="http://rimrock.devinewebmedia.com/"><h1><img src="img/rimrock_200x132.png" width="200" height="132" style="margin-top:10px;"></h1></a>
      </div>
 <div class="large-6 small-6 columns heady tk-proxima-nova">
                <ul class="inline-list right">
        <li><a href="https://investor.omnium.com/">Client Login</a></li>
        <li><a href="/contact.html">Contact</a></li>  
      </ul>
    </div>

并通过更改以下css来设置边距，因为它使导航链接对齐到顶部

@media screen and (max-width: 40em) {
.heady {
    margin: 0 !important;
}
}

移动保证金问题的基础5导航菜单

2 个答案: