我有一个关于加力燃烧主题的Joomla网站。
在移动设备上查看时，导航菜单切换显示为右上角的按钮（显示导航菜单的标准移动方式）。
我遇到的问题是导航菜单上方的内容太多，因此当导航菜单打开时，您无法向下滚动查看内容。我知道我可以在移动设备上完全删除它，但我不愿意。
以下是处理菜单的CSS
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
ul.level3 {
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.rok-left {
float: left;
}
.rok-right {
float: right;
}
.rok-dropdown-group,
.rok-dropdown {
position: relative;
}
.rok-dropdown-open .rok-dropdown {
display: block;
}
.rok-popover-group,
.rok-popover {
position: relative;
}
.rok-popover-open .rok-popover {
display: block;
}
.gf-menu {
-webkit-box-shadow: inset 0 1px 1px #ffffff;
-moz-box-shadow: inset 0 1px 1px #ffffff;
box-shadow: inset 0 1px 1px #ffffff;
}
.gf-menu-toggle {
padding: 7px 10px;
border-radius: 4px;
background-color: #f0f0f0;
background-image: -moz-linear-gradient(top, #ffffff, #dadada);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#dadada));
background-image: -webkit-linear-gradient(top, #ffffff, #dadada);
background-image: -o-linear-gradient(top, #ffffff, #dadada);
background-image: linear-gradient(to bottom, #ffffff, #dadada);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffd9d9d9', GradientType=0);
position: absolute;
z-index: 2;
top: 10px;
left: 10px;
cursor: pointer;
}
.gf-menu-toggle.active {
background-color: #dcdcdc;
background-image: -moz-linear-gradient(top, #cdcdcd, #F3F3F3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cdcdcd), to(#F3F3F3));
background-image: -webkit-linear-gradient(top, #cdcdcd, #F3F3F3);
background-image: -o-linear-gradient(top, #cdcdcd, #F3F3F3);
background-image: linear-gradient(to bottom, #cdcdcd, #F3F3F3);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffcccccc', endColorstr='#fff3f3f3', GradientType=0);
}
.gf-menu-toggle .icon-bar {
background-color: #32373D;
border-radius: 1px 1px 1px 1px;
display: block;
height: 2px;
width: 18px;
}
.gf-menu-toggle .icon-bar + .icon-bar {
margin-top: 3px;
}
@media (max-width: 767px) {
.layout-mode-responsive .gf-menu-device-wrapper {
margin-bottom: 15px !important;
}
.layout-mode-responsive .gf-menu-device-container {
background: #741c1b;
border-radius: 5px;
padding: 5px;
}
.layout-mode-responsive .gf-menu-device-container select {
margin-bottom: 0;
width: 100%;
}
.layout-mode-responsive .gf-menu {
background-clip: content-box;
-webkit-background-clip: content-box;
background: #741c1b;
border: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
margin: 0;
}
.layout-mode-responsive .gf-menu ul {
padding-left: 20px;
}
.layout-mode-responsive .gf-menu li {
margin-right: 0 !important;
}
.layout-mode-responsive .gf-menu li.active.last {
border: 0 !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.layout-mode-responsive .gf-menu li.active.last > .item {
border-radius: 4px;
background: rgba(255, 255, 255, 0.5);
}
.layout-mode-responsive .gf-menu li:hover > .item {
color: !important;
}
.layout-mode-responsive .gf-menu li .item {
padding: 0 10px !important;
border: none !important;
color: #FFFFFF;
line-height: 30px;
}
.layout-mode-responsive .gf-menu li .item.subtext em {
display: none;
}
.layout-mode-responsive .gf-menu li .item:after {
content: '' !important;
border-right: 0 !important;
}
.layout-mode-responsive .gf-menu .dropdown {
width: 100% !important;
border: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
background: transparent !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
position: relative;
left: inherit;
top: inherit;
opacity: 1;
*zoom: 1;
}
.layout-mode-responsive .gf-menu .dropdown:before,
.layout-mode-responsive .gf-menu .dropdown:after {
display: table;
content: "";
line-height: 0;
}
.layout-mode-responsive .gf-menu .dropdown:after {
clear: both;
}
.layout-mode-responsive .gf-menu .dropdown .flyout {
display: block;
}
.layout-mode-responsive .gf-menu .dropdown .column {
width: 100% !important;
}
.layout-mode-responsive .gf-menu .dropdown .grouped ol {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.layout-mode-responsive .gf-menu .dropdown .modules {
display: none;
}
.layout-mode-responsive .gf-menu.l1 > li {
float: none;
}
.layout-mode-responsive .gf-menu.l1 > li.active {
margin-left: 0px;
background: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 0;
}
.layout-mode-responsive .gf-menu.l1 > li > .item {
font-size: 15px;
line-height: 40px;
border-right: none !important;
}
.layout-mode-responsive .gf-menu ul.level3 {
display:none;
}
.layout-mode-responsive .award-winning {
display:none;
}
}
我想要发生的是以下时间
.gf-menu-toggle.active {
它应该还有一个显示：无＆＃39;对于某些div（即div =＆＃34; awards＆＃34;）。我不确定如何实现这一目标？
答案 0 :(得分：0)
将样式应用于＆＃34;某些div＆＃34; （div#awards）在特定选择器（.gf-menu-toggle.active）内执行此操作：
.gf-menu-toggle.active div#awards { display: none; }
这会将display: none样式应用于.gf-menu-toggle.active元素中您想要的任何元素。
答案 1 :(得分：0)
除非您要隐藏的“某些div”包含在您使用CSS定位的.active类中，否则您将无法使用CSS隐藏它们。
您有两个选择：
1）看看是否有其他类被添加到正文或层次结构中更高的某个元素，因此您可以将其作为目标来获取“某些div”
2）使用这样的jQuery：
$('ul').click(function(){
var certainDivs = $('div#awards, #other-div, .certain-div');
if ($('.gf-menu-toggle').hasClass('active')){
$(certainDivs).hide();
}
else{
$(certainDivs).show()
}
});
jQuery应该绑定到一个事件（比如点击<ul>时的东西），这样函数就会触发并完成它的工作。