clickable Dropdown Menu minimal theme

New Member
4 0 0

Hello!

My store is Steadbrook.com. I'm using the minimal theme and I've made a custom sidebar. Currently, I'm trying to add a "categories" section and I want to make the dropdown menus under 'Tops' and 'Accessories' clickable instead of hover and I want when you click them, the menu to expand below it and everything underneath move downward. I've included screenshots of how it looks now and how I want it to look. The first is my store and the second is Ssense.com.

 Screen Shot 2019-11-04 at 2.08.38 PM.pngHow it looks now

Screen Shot 2019-11-04 at 2.08.23 PM.pngHow I want it to look

0 Likes
New Member
4 0 0

NOTE:

I'm not sure what code you would need to see or what I need, but I basically took the code from the dropdown menu in the header and pasted it into the sidebar then made a few modifications. This is the code on the sidebar:

    <a> <h4>Categories</h4> </a>
    
    <li class="site-nav--has-dropdown_sidebar" aria-haspopup="true">
   
                <li>
                  <a href="https://steadbrook.com/collections/all?sort_by=created-descending" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                      All
                  </a>
                </li>
 
            
              
              
                <li class="site-nav--has-dropdown site-nav--has-dropdown-grandchild " aria-haspopup="true">
                  <a href="/collections/tops" class="sidebar-item" aria-controls="MenuChildren-1-2" data-meganav-type="parent" tabindex="-1" aria-expanded="false">
                      Tops
                      <span class="icon icon-arrow-down" aria-hidden="true"></span>
                  </a>
                  <button id="MenuParent-1" class="site-nav__dropdown dropdown_container" data-meganav-dropdown="">
                    
                      <li>
                        <a href="/collections/tops" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            All Tops
                          </a>
                      </li>
                    
                      <li>
                        <a href="/collections/t-shirts" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            T-Shirts
                          </a>
                      </li>
                    
                      <li>
                        <a href="/collections/shirts-1" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            Shirts
                          </a>
                      </li>
                    
                      <li>
                        <a href="/collections/sweatshirts-1" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            Sweatshirts
                          </a>
                      </li>
                    
                      <li>
                        <a href="/collections/knits" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            Knits
                          </a>
                      </li>
                    
                      <li>
                        <a href="/collections/outerwear" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            Outerwear
                          </a>
                      </li>
                    
                  </button>
                </li>
              
            
              
                <li>
                  <a href="/collections/bottoms" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                      Bottoms
                  </a>
                </li>
              
            
              
                <li>
                  <a href="/collections/footwear" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                      Footwear
                  </a>
                </li>
              
            
              
              
                <li class="site-nav--has-dropdown site-nav--has-dropdown-grandchild " aria-haspopup="true">
                  <a href="/collections/accessories-1" class="sidebar-item" aria-controls="MenuChildren-1-5" data-meganav-type="parent" tabindex="-1" aria-expanded="false">
                      Accessories
                      <span class="icon icon-arrow-down" aria-hidden="true"></span>
                  </a>
                  <button id="MenuParent-1" class="site-nav__dropdown site-nav--has-grandchildren" data-meganav-dropdown="">
                    
                      <li>
                        <a href="/collections/accessories-1" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            All Accessories
                          </a>
                      </li>
                    
                      <li>
                        <a href="/collections/headwear" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            Headwear
                          </a>
                      </li>
                    
                      <li>
                        <a href="/collections/jewelry" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            Jewelry
                          </a>
                      </li>
                    
                      <li>
                        <a href="/collections/watches" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            Watches
                          </a>
                      </li>
                    
                      <li>
                        <a href="/collections/socks" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            Socks
                          </a>
                      </li>
                    
                      <li>
                        <a href="/collections/bags" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            Bags
                          </a>
                      </li>
                    
                      <li>
                        <a href="/collections/read" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            Read
                          </a>
                      </li>
                    
                      <li>
                        <a href="/collections/home" class="sidebar-item" data-meganav-type="child" tabindex="-1">
                            Home
                          </a>
                      </li>
                    
                  </button>
                </li>
              
            
 
              
            
          </ul>
        </li>

 

0 Likes