Question

我正在使用w3-css创建一个菜单栏。菜单栏应固定在顶部。

问题是，当屏幕宽度设置为窄，并且菜单包含多行时，它会覆盖第一行文本。有办法以某种方式解决它吗？

Answer 1

您可以使用媒体查询解决此问题。媒体查询允许您将CSS应用于特定屏幕大小的网站。例如：

  @media (max-width: 650px) {
       .w3-container {
            padding-top: 40px;
        }
  }

此CSS以较小的屏幕尺寸向下推动容器，以便菜单永远不会掩盖其下方的文本。或者，您可以使用媒体查询来缩小菜单文本，或者在菜单尺寸较小时隐藏菜单的某些部分。

大多数人切换到移动设备的另一种形式的菜单，例如汉堡菜单。这不是解决您目前面临的问题所必需的，但您可能希望针对未来的项目进行调查。

Answer 2

将.w3-top设置为粘贴而不是固定。然后从身体上移除margin-top。