html - 响应式网站重叠

Question

我正在尝试使网站具有响应性；我几乎完成了它，除了当我缩小窗口时，导航链接与左侧的徽标重叠。看这里 当我重新调整窗口大小时，如何使导航栏移动到徽标下方？谢谢你的帮助

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