jQuery - MixItUp 更改默认活动选项卡内容

jQuery - MixItUp change default Active tab content

我正在使用 jQuery - MixItUp 投资组合插件。

如何将默认选项卡内容显示为“Icon Tab具有相关内容而不是“All

Tab Active 在内容未更改的情况下工作正常...


Online Demo


jQuery


$(function () {

  var filterList = {

    init: function () {

      // MixItUp plugin
      // http://mixitup.io
      $('#portfoliolist').mixitup({
        targetSelector: '.portfolio',
        filterSelector: '.filter',
        effects: ['fade'],
        easing: 'snap',
        // call the hover effect
        onMixEnd: filterList.hoverEffect()
      });               

    },

    hoverEffect: function () {

      // Simple parallax effect
      $('#portfoliolist .portfolio').hover(
        function () {
          $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
          $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');               
        },
        function () {
          $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
          $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');                             
        }       
      );                

    }

  };

  // Run the show!
  filterList.init();


}); 

HTML


<div class="container">

  <ul id="filters" class="clearfix">
    <li><span class="filter" data-filter="app card icon logo web">All</span></li>
    <li><span class="filter" data-filter="app">App</span></li>
    <li><span class="filter" data-filter="card">Card</span></li>
    <li><span class="filter active" data-filter="icon">Icon</span></li>
    <li><span class="filter" data-filter="logo">Logo</span></li>
    <li><span class="filter" data-filter="web">Web</span></li>
  </ul>

  <div id="portfoliolist">

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">               
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/5.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Bird Document</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>              

    <div class="portfolio app" data-cat="app">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Visual Infography</a>
            <span class="text-category">APP</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>      

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">                       
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Sonor's Design</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>              

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Typography Company</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>  

    <div class="portfolio app" data-cat="app">
      <div class="portfolio-wrapper">
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Weatherette</a>
            <span class="text-category">APP</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>          

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">BMF</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>  

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/5.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Techlion</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>  

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">KittyPic</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                                                                                                          

    <div class="portfolio app" data-cat="app">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Graph Plotting</a>
            <span class="text-category">APP</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                      

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">QR Quick Response</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>              

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/6.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Mobi Sock</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                  

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/7.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Village Community Church</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                  

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Domino's Pizza</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                          

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">                       
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Backend Admin</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                                              

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Instagram</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>              

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">                       
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Student Guide</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                  

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Scoccer</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                                                                                                                                                                                                              

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">                       
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/5.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">3D Map</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>          

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">                       
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Note</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                  

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Native Designers</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                  

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Bookworm</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                                                              

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Sandwich</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                                              

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Reality</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>  

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Speciallisterne</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>              


  </div>

</div><!-- container -->

我找到了解决方案,查看 mixitup.js 的源代码,您只需要传递名为 showOnLoad 的对象 属性,默认设置为 all .

较新的版本有不同的 属性 设置,

这是示例,[版本 1.5.6](这是您的版本)

$('#portfoliolist').mixitup({
    showOnLoad : 'icon', // <----- This property
    targetSelector: '.portfolio',
    filterSelector: '.filter',
    effects: ['fade'],
    easing: 'snap',
});  

示例,[版本 2.1.9]

load: {
    filter: 'all',
},

Herev2.1.9 的来源,如果您想挖掘更多内容。

查看以下示例:图标 作为默认过滤器

$(function () {

  var filterList = {

    init: function () {

      // MixItUp plugin
      // http://mixitup.io
      $('#portfoliolist').mixitup({

        showOnLoad : 'icon',
        targetSelector: '.portfolio',
        filterSelector: '.filter',
        effects: ['fade'],
        easing: 'snap',
        // call the hover effect
        onMixEnd: filterList.hoverEffect()
      });    

    },

    hoverEffect: function () {

      // Simple parallax effect
      $('#portfoliolist .portfolio').hover(
        function () {
          $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
          $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');    
        },
        function () {
          $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
          $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');        
        }  
      );    

    }

  };

  // Run the show!
  filterList.init();


});
<link rel="stylesheet" type="text/css" href="http://www.queness.com/resources/html/simple-portfolio-page/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://www.queness.com/resources/html/simple-portfolio-page/css/layout.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.queness.com/resources/html/simple-portfolio-page/js/jquery.easing.min.js"></script>
<script src="http://www.queness.com/resources/html/simple-portfolio-page/js/jquery.mixitup.min.js"></script>
<div class="container">

  <ul id="filters" class="clearfix">
    <li><span class="filter" data-filter="app card icon logo web">All</span></li>
    <li><span class="filter" data-filter="app">App</span></li>
    <li><span class="filter" data-filter="card">Card</span></li>
    <li><span class="filter active" data-filter="icon">Icon</span></li>
    <li><span class="filter" data-filter="logo">Logo</span></li>
    <li><span class="filter" data-filter="web">Web</span></li>
  </ul>

  <div id="portfoliolist">

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">    
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/5.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Bird Document</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>    

    <div class="portfolio app" data-cat="app">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Visual Infography</a>
            <span class="text-category">APP</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>  

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">      
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Sonor's Design</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>    

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Typography Company</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div> 

    <div class="portfolio app" data-cat="app">
      <div class="portfolio-wrapper">
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Weatherette</a>
            <span class="text-category">APP</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>   

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">BMF</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div> 

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/5.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Techlion</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div> 

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">KittyPic</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                       

    <div class="portfolio app" data-cat="app">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Graph Plotting</a>
            <span class="text-category">APP</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>              

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">QR Quick Response</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>    

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/6.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Mobi Sock</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                 

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/7.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Village Community Church</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>             

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Domino's Pizza</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>       

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">      
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Backend Admin</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                        

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Instagram</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>    

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">      
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Student Guide</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                 

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Scoccer</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">      
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/5.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">3D Map</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>   

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">      
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Note</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>         

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Native Designers</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                 

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Bookworm</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                            

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Sandwich</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                        

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Reality</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div> 

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Speciallisterne</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>    


  </div>

</div><!-- container -->