javascript - Magento 响应主题 : Menu not showing up between 980 and 740 widths

标签 javascript css twitter-bootstrap magento mobile

http://www.acuity-sports.com/basketball.html

上面是网站的链接。我正在使用的响应式主题隐藏了 980 到 740ish 宽度之间的移动菜单。

http://responsivepx.com/?www.acuity-sports.com%2F#900x564&scrollbars

我的问题是 Bootstrap 需要修复,还是与菜单本身相关的 .css。这个让我很困惑。

这是 Bootstrap 中的@media:

@media (min-width: 768px) and (max-width: 979px) {
.header-bottom .container, .header-bottom .container .span12, 
.topsl-wrap .container, .topsl-wrap .container .span12, 
.cms-home .slide-wrap .container, 
.cms-home .slide-wrap .container .span12 {
    width:754px;    
}   
/*.block-feature-products .row > div:first-child +div , */
.block-feature-products  .row > div:first-child {   display:none; }

.header-top .container,
h1#logo{padding:0!important;}
.header-top #nav,

.mega-menu .social {    display:none; }
.plus-button{left: 115px;}
.wrapper .col2-left-layout .main{background:none!important;}
.col2-left-layout #sm_footer{padding:0!important;}
/* .col2-left-layout .col-left{display:none} */
.col2-left-layout .col-left > [class*="span"] > div{    margin-top:0;   display:block;  }
.col2-left-layout .col-left > [class*="span"] > div ~ div{  display:none;   }

.wrapper .col2-left-layout{margin:0 auto;}
.quick-access .shop-access {    float:right;}
.item-li3 a{padding-left: 20px!important;}
.li-add{padding-left: 5px;}
.paging-btn{right: 100px!important;}
#best-sales li.item{margin-right:8px!important;min-height: 218px!important;}
#best-sales .item-description{  margin-bottom: 25px; }
.cms-home .products-grid li.item{width:138px!important;}
.cms-home .products-grid li.item .product-image img{width:135px!important;}

.yt-slider .products-grid .item-inner .item-box div.product-image {
  padding:0 !important;
}

.banner-g1 a{ padding: 0 0 0 0!important;   width:100%; }
.banner-g1 a:first-child{ padding: 0 0 25px 0!important;}
.cms-home .products-grid li.item{margin-right:6px!important;}
div.product-name a{font-size:15px!important;}
.manu-items img{width: 90px;}
.bottom-footer .sm-glasses,.bottom-footer .contact-us,.bottom-footer .choose-us,.bottom-footer .popular-tags{margin-right:5px!important;}
/* .block-content ul li img{width: 50px;} */
.sm-glasses li{margin-right:10px!important;}
input#newsletter{width: 140px!important;}
.block-newsletter label{font-size:14px!important;}
#sm_header{ overflow: visible!important;}
.col1-layout #sm_footer{width: 724px!important; padding: 0 !important;}

/*  code standard responsive */
.bottom-footer {    display:none; }
.category-products .popup-box { width:auto;  }

/* process form  */
.input-box input,
.input-box textarea {   width:170px ; }
input#productTagName {  width:360px !important; }       
select {    width:190px;    }
#contactForm { /* width:200px */; }
.yt-slider .products-grid { margin:0; }
/* #sm_slideshow { font-size:80%; }  */
#sm_slideshow .custom-content span.content-sl4 { width: 360px; margin-top:10px; margin-left:5px; }
#sm_slideshow .custom-title a.title-sl4 { margin-left:5px; }
#sm_slideshow .video-sl4 { max-width:380px; }
.header-top .language-switcher .jqTransformSelectWrapper div span{
    padding-left:5px;
}
.header-top .currency-switcher{
    padding-left:4px;

最佳答案

@media (min-width: 768px) and (max-width: 979px) 中,您通过 js 隐藏了菜单。请参阅下面的链接。我认为您的 javascript 没有为给定的分辨率设置显示 block 。

http://screencast.com/t/TwXUPFhxsh

关于javascript - Magento 响应主题 : Menu not showing up between 980 and 740 widths,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22688336/

相关文章:

html - 以正确的方式设置 <input type=number/> 微调器箭头的样式

javascript - 如何将悬停替换为单击

javascript - 使用 JavaScript 更改 DIV 背景图像不起作用

Javascript XSLT 框架

javascript - 如何使用 element.style.backgroundImage = "url(filePath)"将背景图像添加到 javascript?

javascript - Bootstrap 附加自定义 JS 和 CSS 重叠 HTML 元素/定位不正确

css - 对齐工具栏中的元素

html - Bootstrap 导航项未在移动设备上显示

javascript - 如何将一个div放置在另一个div上方而不切断顶部div

javascript - 避免在 javascript 中循环多次返回 - async/await 以解决回调金字塔或回调 hell ,