Wolfgang_Sebastian Posted November 29, 2023 Posted November 29, 2023 (edited) Hey 🙂 I want to customize my mobile menu from my site https://www.smart-and-agile.de/ The links from the folder "Services" should appear as individual links (without the folder). A dividing line should be placed underneath. The pages from the footer should appear under this dividing line in a smaller font, even if they are not stored in the main navigation. The footer should then be hidden in the mobile version I'm really looking forward to your support! Thank you in advance! Wolfgang  Edited November 29, 2023 by Wolfgang_Sebastian
tuanphan Posted December 1, 2023 Posted December 1, 2023 Hi, #1. You can add this code to Website Tools (under Not Linked) > Code Injection > Footer This code will create effect: When users click on Services >> Show all folder item under it without open new sub page. If this is not what you want, you describe your desired layout, we can check it again easier <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-menu-nav-folder[data-folder="/services"]').appendTo('[data-folder="root"]>div>.container.header-menu-nav-item:nth-child(2)'); $('a[data-folder-id="/services"]').click(function() { $(this).toggleClass('tp-burger-folder'); }); }); </script> <style> .header-menu-nav-folder[data-folder="/insights"] { display: block !important; position: relative !important; transform: unset !important; overflow: hidden; height: 0 !important; transition: all 0.3s; } .header-menu-nav-folder[data-folder="/insights"] .header-menu-controls { display: none; } a.tp-burger-folder+.header-menu-nav-folder[data-folder="/insights"] { height: 100% !important; } .header-menu-nav-folder[data-folder="root"] { transform: unset !important; overflow: hidden; } [data-folder="/insights"] a { margin-top: 5px; margin-bottom: 5px; white-space: nowrap; } [data-folder-id] { margin-top: 10px; margin-bottom: 10px !important; } a[data-folder-id] span:nth-child(2):after { content: "\e009"; font-family: 'squarespace-ui-font'; } a[data-folder-id] { white-space: nowrap; } span.chevron.chevron--right { visibility: hidden !important; } </style>  #2. You mean reduce text size? #3. To hide Footer on Mobile, add this code to Website Tools > Custom CSS @media screen and (max-width:767px) { footer.sections { display: none !important; } }  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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment