css - 菜单环绕和空白 :nowrap making the menu go past the page Wordpress

标签 css wordpress menu navbar

我正在重做一个 Wordpress 网站,我遇到了菜单问题。我正在使用 Compass 主题,这就是顶部菜单的样子。

enter image description here

然后当我做

#MainNav {
    width: 100%;
    white-space:nowrap;
}

在 Wordpress 的自定义 CSS 中,菜单超出了页面。
enter image description here

有什么建议吗?我希望菜单显示在一行中并动态调整大小。我进行了广泛的谷歌搜索并尝试了我能找到的任何东西,包括 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 想法似乎也行得通。虽然菜单在平板电脑大小的屏幕上可能看起来有点时髦。

Flexbox

最后一点,在自定义不是我设计的主题时,我总是使用子主题。通过这种方式,您可以有组织地自定义主题,并且在父级更新时不会丢失任何代码。您可以在此处阅读有关 child 主题的信息:

https://codex.wordpress.org/Child_Themes

关于css - 菜单环绕和空白 :nowrap making the menu go past the page Wordpress,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48193693/

相关文章:

jquery - 下拉菜单中的 Bootstrap 选项卡 Pane

javascript - 如何使用链接更改 Css 编码

php - 来自表单的 WP 邮件附件,无需在文件管理器上上传文件

javascript - 无法在 WordPress UI 中解析 json 字符串

javascript - 单击移动设备时如何使悬停菜单上的 CSS 消失

css - 较长的品牌名称在小屏幕上从导航栏中移出

jquery - 回到同样的颜色

php - 主页 wordpress 中的 2 列

android - 在主 Activity 类之外实现 onCreateOptionsMenu

asp.net - 发出与 .NET 4.0 相同标记的 CSS 友好菜单适配器