title: Can I make a menu using .row and .col from Bootstrap?
body: <p>I was trying to make a menu using cols from bootstrap. Something similar to this:</p>
  
  <p><a href="http://i.stack.imgur.com/55xst.png" rel="nofollow">http://i.stack.imgur.com/55xst.png</a></p>
  
  <p>But I think it's not the best way to make it because I found so much troubles when I tried to implement into Wordpress..</p>
  
  <p>Have some idea how can make it in the right way?</p>
  
  <p>This is my <a href="http://jsfiddle.net/andresgl/0jd5uptp/2/" rel="nofollow">code</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container main-menu"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-6 col-sm-6 col-md-3 col-menu logo"&gt;
              &lt;div class="item-menu"&gt;
                  &lt;figure&gt;
                      &lt;img src="http://www.sdi-inc-usa.com/image/35012580_scaled_116x87.jpeg" alt=""&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center"&gt;
              &lt;div class="item-menu"&gt;
                  &lt;div class="txt-main-menu"&gt;
                      &lt;a href="#"&gt;lorem ipsum&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="clearfix visible-xs-block"&gt;&lt;/div&gt;
  
          &lt;div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center"&gt;
              &lt;div class="item-menu"&gt;
                  &lt;div class="txt-main-menu"&gt;
                      &lt;a href="#"&gt;lorem ipsum &amp; lorem ipsum&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center"&gt;
              &lt;div class="item-menu"&gt;
                  &lt;div class="txt-main-menu"&gt;
                      &lt;a href="#"&gt;lorem ipsum lorem ipsum lorem ipsum&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;          
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.main-menu {
      margin-top: 40px;
  }
  
  .main-menu &gt; .row &gt; .logo {
      text-align: left!important;
  }
  
  .main-menu &gt; .row &gt; .col-menu &gt; .item-menu {
      background: #f2f2f2;
      padding: 10px;
      height: 107px;
      font-size: 1.375em;
      position: relative;
  }
  
  .main-menu &gt; .row &gt; .col-menu &gt; .item-menu:hover {
      background: #bcd22c;
  }
  
  .txt-main-menu &gt; a {
      font-family: 'museo-700';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 25px 25px;
      text-decoration: none;
      color: #565656;
  }
  
  .col-menu {
      padding-left: 0px; 
      padding-right: 5px;
      padding-bottom: 5px;
  }
  /** END Main Menu - LOGO*/
  
  
  @media screen and (max-width: 767px) {
      div.col-menu:nth-child(2n+3),
      div.col-news:nth-child(2n+3),
      div.col-menu:nth-child(2),
      div.col-news:nth-child(2) {
          padding: 0;
      }
  
      .col-grid {
          padding-right: 0;
      }
  }
  </code></pre>
  
  <p>Thank you</p>