响应式网站重叠

Question

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

Answer 1

我使用了你的代码，我发现的第一件事是两个#nav id，你每页应该只有一个唯一的id。

但是，您的主要问题是导航项目的位置固定。这导致导航器总是在徽标上行进。固定位置忽略文档流，并将其放置在放置它的任何位置。

您需要让导航回到文档流中，将您的导航项目更改为relative，并干预顶部位置。

您应该将这些放置在与您的断点相关的新媒体查询中，您还需要删除所有这些定位样式。这应该能让你走到一半。我很想多帮点忙，但我刚喝了朗姆酒和可乐，所以最好现在就停下来。

史蒂夫

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