css - 移动设备上纯导航菜单背景的 CSS 代码

Question

我有一个我目前正在处理的测试页面 - https://www.monofireandsecurity.co.uk/test-page

我希望导航菜单的背景在桌面上是透明的，但在平板电脑和移动设备上是纯色的。我正在使用 Elementors 导航生成器，但我只能为所有三个设备设置一种背景颜色

我试过的代码是：

.header.mobile {背景颜色：#000000;}

但什么也没发生

任何帮助感谢马克

Answer 1

您可以为此使用css 媒体查询。媒体查询可以覆盖某些视口尺寸上的样式。

/** 'global' style **/
.elementor-menu .menu-item {
  background-color: #000;
}

/** desktop style **/
@media only screen and (min-width: 1024px) {
    .elementor-menu .menu-item { background-color: transparent; }
}