我正在尝试更改移动设备上站点子菜单的外观;我的主题已经在移动设备上具有特殊样式, 我的问题是媒体查询似乎不起作用
因此, 我制作了移动菜单, 其中包括下拉菜单的样式, 该菜单在小屏幕尺寸下进行测试时会显示, 但是当我在手机上查看网站时, 默认子菜单会在右侧显示, 如动画所示。我不知道要在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 */
#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
推荐阅读
- 在定制器屏幕上时,定制器选项未返回默认值
- #|网页特效——花间飞舞的蝴蝶
- linux 7
- Typora 标题的自动编号
- 第四周
- Proxmox VE 超融合集群实践真传
- linux之dos2unix命令
- Win2k8&&vCenter部署全流程
- WGCLOUD如何设置指定主机的告警值