修复了顶部菜单无法在手机(CSS)上运行的问题

时间:2019-07-10 09:04:13

标签: css

我有一个单页滚动类型的网站。我在顶部有一个固定菜单,在桌面浏览器上可以正常工作。但是,它在移动设备上不起作用,菜单仅停留在顶部,向下滚动时菜单消失。

我的标头的CSS是

#cssmenu #head-mobile{display:block;padding:23px;color:#FFFFFF;font-size:12px;font-weight:700}
.button-nav{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
.button-nav:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;content:''}
.button-nav:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#FFFFFF;content:''}
.button-nav.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button-nav.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}

0 个答案:

没有答案