Tesseract主题菜单

Question

我是这个论坛的新手，所以大家好。

我正在使用名为tesseract的WordPress网站主题。我是WordPress的新手，因此使用它的经验有限。

我遇到的问题是页面顶部的菜单。如果您访问www.avoinvents.co.uk并查看一下，您会发现这些类别并不在同一条线上。如果我删除其中一个类别，页面看起来更好，更整洁。所有类别都是必要的，所以我无法删除任何类别。

这里的任何人都可以建议我如何进行必要的修改以修复菜单。

非常感谢

Answer 1

这是我在浏览器中更改的CSS，使菜单显示在所有行中：

#masthead {
padding-top: 10px;
padding-bottom: 10px;
}

#site-banner-left {
width: 100%;
}

主要问题是site-banner-left CSS定义的宽度为60％，导致文本环绕其边框，因此我将其宽度更改为100％并添加了填充以使导航区域成为小一点。如果这与主题的其他部分混淆，请尝试使site-banner-left定义的文本大小更小，而不是更改其宽度。希望这会有所帮助。

Answer 2

您限制了可用宽度，因为祖先元素#site-banner-left的宽度为60％。增加此值或删除此规则以允许整个菜单自然适应。

此外，由于菜单项是inline-block元素，您可以通过将父元素的white-space设置为nowrap来强制它们在一行上：

.nav-menu {
    white-space: nowrap;
}