powerhouseoutletmedia Posted August 23, 2021 Share Posted August 23, 2021 Site URL: https://toucan-sunfish-58bp.squarespace.com Hello! For some reason my mobile categories look like this ( please see attached photos). I'd like for it to look a lot more like the desktop. If there's anyway the mobile categories can look more appealing, I would really appreciate anyones help on this matter. Thanks! powerhouseoutletmedia.com password : PHOmedia Link to comment
tuanphan Posted August 26, 2021 Share Posted August 26, 2021 Hi, Do you want to change mobile category to dropdown format? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
powerhouseoutletmedia Posted August 27, 2021 Author Share Posted August 27, 2021 On 8/26/2021 at 3:53 AM, tuanphan said: Hi, Do you want to change mobile category to dropdown format? Yes, I wouldn't mind that at all. Link to comment
tuanphan Posted August 30, 2021 Share Posted August 30, 2021 On 8/28/2021 at 12:42 AM, powerhouseoutletmedia said: Yes, I wouldn't mind that at all. Add to Settings > Advanced > Code Injection > Footer <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> powerhouseoutletmedia 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
powerhouseoutletmedia Posted August 31, 2021 Author Share Posted August 31, 2021 On 8/30/2021 at 5:10 AM, tuanphan said: Add to Settings > Advanced > Code Injection > Footer <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> wow this is perfect! thanks so much! 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