当浏览器是iPad大小时，导航栏没有被包裹，如何修复？

Question

我在网站上工作： sites.northwestern.edu/mrsec

当浏览器变成iPad大小（1024像素）时，导航菜单的一部分会低于菜单的其余部分，由于某种原因它不包含在背景颜色中，并且字体是白色的，所以人们可以＆＃ 39;看到它。当浏览器制作得足够小时，菜单中剩下的部分会被相同的背景颜色（灰色）包裹，但在此之前，人们无法看到菜单下方的部分菜单的其余部分。如何使用CSS或任何其他语言修复此问题？我使用wordpress模板，我无法访问php或模板文件，因为学校没有给我们访问权限。

Answer 1

您应创建媒体查询以定位所需的屏幕大小，然后添加样式以减少填充和字体大小，以便显示每个菜单项。

在你的情况下，它看起来像这样：

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .main-navigation a{
        padding: 0 15px;
        font-size:14px;
    }
}

请参阅结果的this screenshot。