Question

我正在努力使网站响应;我几乎完成了它，除了当我使窗口变小时，导航链接与左侧的徽标重叠。看看它here 当我重新调整窗口大小时，如何让导航栏移动到徽标下？谢谢你的帮助

Answer 1

我玩了你的代码，我发现的第一件事就是两个#nav id。每页只能有一个唯一ID。

但是，您的主要问题是导航项目的固定位置。这导致导航员始终只是在徽标上行进。已修复的位置忽略文档流并将其放在您放置的任何位置。

您需要将导航重新导入文档流程将您的导航项目更改为亲戚，并使用顶部定位进行插入。

您应将这些内容放入与您的断点相关的新媒体查询中您还需要删除所有这些定位样式。这应该让你在那里一半。我会帮助更多，但我刚刚得到了朗姆酒和可乐，所以最好现在停下来。

史蒂夫

Answer 2

向下移动徽标，或在徽标上方创建一些空间并将链接放在所述空间中。

Answer 3

您必须更改许多position属性以及float属性 - 我在网站上使用了CSS，这就是我更改的内容：

#topBar {
    height: 300px;
}
.BODYcontainer {
    margin-top: 300px;
}
.container .columns {
    float: none;
}
.container .columns.logoBox {
    left: 0;
    position: relative;
    display: block;
    float: none;
    margin-bottom: 50px;
}
#nav {
    position: relative;
    float: none;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    display: block;
}
#companyNav {
    float: none;
    position: relative;
    top: 0;
}

响应网站重叠

3 个答案: