当浏览器是iPad大小时，导航栏没有换行，如何修复

Question

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

当浏览器变成iPad大小（1024像素）时，导航菜单的一部分会位于菜单其余部分的下方，并且由于某种原因，它不包含在背景颜色中，并且字体为白色，因此人们看不到它。 当浏览器做得足够小时，其余部分下方的菜单部分会被相同的背景颜色（灰色）包裹， 但在此之前，人们看不到菜单其余部分下方的菜单部分。如何使用 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;
    }
}

请参阅结果的屏幕截图。