我正在重做一个 Wordpress 网站,我遇到了菜单问题。我正在使用 Compass 主题,这就是顶部菜单的样子。
然后当我做
#MainNav {
width: 100%;
white-space:nowrap;
}
在 Wordpress 的自定义 CSS 中,菜单超出了页面。
有什么建议吗?我希望菜单显示在一行中并动态调整大小。我进行了广泛的谷歌搜索并尝试了我能找到的任何东西,包括 flexboxes,但没有任何解决办法。我对 Wordpress 也很陌生,并不真正了解文件结构,而且我对在 Stackoverflow 上提问也很陌生!
最佳答案
我发现让我的菜单适应我没有设计的主题的最简单方法是编写 CSS 覆盖来调整菜单中列表项的填充和字体大小。通常我在媒体查询中这样做,这样只有某些断点会受到我的更改的影响。这是一个如何使菜单项很好地适应的示例。将 li 的 margin-right 设置为 0。如果需要更多的摆动空间,您还可以调整 li > a 上的字体大小。
Adjust the margin-right so it is 0
如果您没有使用媒体查询,您的自定义 CSS 将如下所示:
#menu .ddsmoothmenu li {
margin-right: 0;
}
您的 flexbox 想法似乎也行得通。虽然菜单在平板电脑大小的屏幕上可能看起来有点时髦。
最后一点,在自定义不是我设计的主题时,我总是使用子主题。通过这种方式,您可以有组织地自定义主题,并且在父级更新时不会丢失任何代码。您可以在此处阅读有关 child 主题的信息:
关于css - 菜单环绕和空白 :nowrap making the menu go past the page Wordpress,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48193693/