Circagirl92 Posted February 23, 2022 Share Posted February 23, 2022 Site URL: https://www.accentrekdesigns.com/all-products I know it's been asked in the past, but I've not found a working solution. I would like to make the Categories, under my Store page, display as a dropdown list on mobile (instead of the horizontal side scrolling menu). I'm currently using a fix where my categories display all stacked at least. However, with 5+ Categories it is starting to look a bit busy. Any suggestions on how to implement this? Beyondspace 1 Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 Add to Settings > Advanced > Code Injection > Footer > then save & check on real mobile <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { if(window.innerWidth <= 575 && $('.nested-category-children li a').length > 0) { let open = false $('<div id="t-category" name="t-category"><div id="t-control">Category <span id="t-down"></span><span id="t-up"></span></div><div id="t-menu"></div></div>').insertBefore('.nested-category-tree-wrapper'); $('.nested-category-children li a').each(function(id, e) { const href = $(e).attr('href'); const text = $(e).html(); $('#t-menu').append('<a class="t-item" href="'+href+'">'+text+'</a>') }) $('#t-control').click(function() { if (!open) { $('#t-menu').css('display', 'block') $('#t-down').css('display', 'none') $('#t-up').css('display', 'unset') open = true } else { $('#t-menu').css('display', 'none') $('#t-down').css('display', 'unset') $('#t-up').css('display', 'none') open=false } }) } }) </script> <style> #t-category { display: none; } @media only screen and (max-width: 575px) { .nested-category-children { display: none !important; } #t-menu { position: absolute; top: 35px; z-index: 1; background: white; display: none; right: 0; text-align: right; } #t-category { position: relative; display: inline-block; float: right; top: 5px; right: 0; } .nested-category-title { display: inline-block !important; } #t-control { font-family: baskerville-display-pt; font-weight: 700; font-style: normal; letter-spacing: 0em; text-transform: none; z-index: 12; font-size: 20px; position: absolute; top: 0; right: 0; padding-right: 20px; } .t-item { display: block; padding-left: 15px; } #t-down { margin-left: 10px; position: absolute; top: 15px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid; right: 0; } #t-up { margin-left: 10px; position: absolute; bottom: 12px; right:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid; display: none; } } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment