css - 移动子菜单的自定义样式

Question

我正在尝试更改我的网站子菜单在移动设备上的外观；我的主题在移动设备上已经有一种特殊的风格，我的问题是它似乎无法通过媒体查询工作

所以我制作了我的移动菜单，包括下拉子菜单的样式，该菜单在小屏幕尺寸上测试时显示，但当我在手机上查看我的网站时，默认子菜单从右侧混合，如动画所示。我不知道要在我的 css 中放入什么来更改它，或者它是否在其他地方我需要进行更改。主题是二十九，我的页面是https://demokratietalk.at

在原始的 css 中，我找到了这段代码，它描述了发生了什么，但如前所述，我不知道它是如何只针对移动设备的:

.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true {
  display: table;
  margin-top: 0;
  opacity: 1;
  padding-left: 0;
  /* Mobile position */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  z-index: 100000;
  /* Make sure appears above mobile admin bar */
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  transform: translateX(100%);
  animation: slide_in_right 0.3s forwards;
  /* Prevent menu from being blocked by admin bar */

Answer 1

您是否尝试过在您的 CSS 中使用媒体查询？对于移动设备，您可以使用以下内容为您的手机添加您想要的所有自定义 CSS。

@media screen and (max-width: 600px) {
  css {
    Your customer CSS goes here
    }
}

查看来自 w3 学校的链接以获得更多帮助 - https://www.w3schools.com/css/css3_mediaqueries_ex.asp