Question

我目前正在为我的网站使用固定标头：http://www.destinykingproductions.com/test/我已经附加了我目前拥有的CSS。任何人都对为什么会这样做有任何建议？

#main {
   background-color: transparent; 
   margin-top: -40px; 
   height: auto; 
   max-height: none; 
   width: auto; 
   padding-bottom: 35px; 
} 

header#masthead {
   height: 103px; 
   background-image: url(http://www.destinykingproductions.com/test/wp-content/uploads/2014/08/header_bg1.jpg); 
   position: fixed; 
   z-index: 856; 
   width: 100%; 
   margin-top: 0px; 
   top: 0px; 
} 

nav.main-navigation {
   top: -200%; 
   background-color: transparent; 
   z-index: 4670; 
} 

nav.main-navigation ul.menu li {
   padding-left: 17px; 
} 

nav.main-navigation ul.menu {
   margin-left: 18%; 
} 

#shiftnav-toggle-main {
   display: none; 
}

感谢您的协助！

Answer 1

以上评论是正确的 - ＆＃34;粘贴＆＃34;在某些时候添加/切换类导航。当你添加＆＃39; display：none＆＃39;到那个粘性类，然后它在桌面视图上很好。但是，看起来您正在使用该类用于移动设备，因为当屏幕调整得更小并恢复正常时，侧边菜单区域不会消失。您可能希望将该粘性类移动到768px媒体查询和/或不在较大的屏幕上显示。

/*normal css*/
.main-navigation.sticky { display: none }

@media screen and (max-width: 768px)
{
    .main-navigation.sticky { display: block }
}

滚动时固定标题停留但导航加倍

1 个答案: