如何通过自定义CSS为移动设备制作粘性头

Question

我现在正在构建我的第一个网站，使用OceanWP免费主题我能够为桌面的粘性头编写CSS，但不幸的是，我不能为移动设备编写同样的CSS。

我现在使用的css代码是：

#site-logo {
float: left;
left: -0px;
z-index: 100000;
position:fixed;
text-align: left;   
height:60px;
margin-top: 0px;
}
#site-navigation {
background:#B4C5E4;
height:70px;
opacity:0.9;
z-index:170;
margin:0 auto;
border-bottom:0px solid
#dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}

该代码在桌面上运行良好，但在移动设备上根本不起作用

如何仅使用CSS在移动设备上制作粘性页眉？

Answer 1

您可以使用以下代码：

#sticky-header {
background:#52694;
height:50px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;}

将#stick标题替换为导航菜单的CSS ID。