html - 使用图标调整菜单大小而不会中断

Question

我在使用 Avada Wordpress 主题开发的页面顶部有一个图标菜单。我试图做到这一点，以便在调整页面大小时图标和菜单标题不断缩小，并且菜单中的文字会中断。

我已经禁用了移动菜单断点(我认为)，现在只想完成它)。

在全屏时我有这个:

在移动分辨率下我有这个:

我想要的是文本在空格处中断。所以“Smart Home”变成了“Smart + newline + Home”并且所有菜单项都保持在一行上。如果查看器的宽度不断减小，那么只需不断减小字体和图标大小，但不要在菜单项之间中断。

我确实尝试为 css 实现一个 calc 函数，但我是新手。

网站在这里:www.paradigmtek.com( build 中)

Answer 1

您需要为菜单中的 li 元素设置固定宽度，以下是您需要针对特定​​页面进行的代码更改:

.fusion-main-menu > ul > li {
    padding-right: 10px;
}
.fusion-main-menu li {
   width: calc(16% - 10px);
}

唯一剩下的就是更改字体大小，您可以选择相对的度量单位(例如。vw、%、em 等)，或者我的建议是使用媒体查询并手动测试所有分辨率，以确保菜单在所有屏幕尺寸上都可读且看起来不错 - 你不应该低于 12px 左右(确切值值得商榷)