Ron_S Posted December 5, 2023 Posted December 5, 2023 (edited) Hello everyone, I am having an issue where the dynamic spacing for a custom menu is cutting off the bottom menu item on certain screen sizes. I used the below quoted code to create the burger style menu, but nothing I add to it (such as 'space-around' and 'space-between') seem to work. I have even tried to set specific pixel spacing between items, but to no avail. Here is the website URL: https://www.syndicatesmith.com Code is not at all my forte, so I'm not sure what I may be doing wrong. Any help would be greatly appreciated. Thanks! Quote //Hide havigation menu .header-nav, .header-actions { display: none; } .header-burger { display: flex; } .header--menu-open .header-menu { visibility: visible; opacity: 1; } //custom menu font styling .header-menu-nav-folder-content .header-menu-nav-item-content { font-size: 25px; line-height: normal; } Edited December 5, 2023 by NorseCr
KwameAndCo Posted December 5, 2023 Posted December 5, 2023 Link to the website so we can see it in action and inspect. Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 For Custom Plugins email me 🧩
Ron_S Posted December 5, 2023 Author Posted December 5, 2023 Sorry - it asked for the URL of the website when I created the post, so I assumed it would be included. Here you go: https://www.syndicatesmith.com
Ron_S Posted December 6, 2023 Author Posted December 6, 2023 Bumping up just in case anyone else is able to offer some insight or solutions - I appreciate it.
melody495 Posted December 7, 2023 Posted December 7, 2023 hi @NorseCr try adding this to your Custom CSS .header-menu-nav-folder { overflow-y: hidden; } Let me know how it goes. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd When I have time, I like to help on the Forum, but if you need my full attention, please send your request here. Tools I use (affiliate links😞 📅Blog Date Format plugin (Free by BeyondSpace) ⏬Lazy Load Summary Block plugin (by Squareswebsites) 📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon) 📈SEO plugin for Squarespace (by SEOSpace) ☕ Did I help? I like coffee (Thank you)
Ron_S Posted December 7, 2023 Author Posted December 7, 2023 Unfortunately, the issue remains: the bottom item of the menu gets cut off on the client's screen. With this code, they said it's the same...only now scrolling seems to be locked and they can't scroll down to the bottom item. I'm just trying to make it so that the menu items 'condense' and are always viewable within the window.
Solution melody495 Posted December 8, 2023 Solution Posted December 8, 2023 4 hours ago, NorseCr said: Unfortunately, the issue remains: the bottom item of the menu gets cut off on the client's screen. With this code, they said it's the same...only now scrolling seems to be locked and they can't scroll down to the bottom item. Apologies, not sure why I thought that worked! What screen sizes are they having issues with? Has to be very small, I'm only seeing the menu turn into scroll at less than 520px tall. Try this in Custom CSS. The menu items are not display: flex, that's why spacing-between etc didn't work for you. Each text has margin around it, so the simplest way is you can adjust those numbers to make them closer together. .header-menu-nav .header-menu-nav-item a { margin-top: 0; //change number to what you want margin-bottom: 0; // change number to what you want } -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd When I have time, I like to help on the Forum, but if you need my full attention, please send your request here. Tools I use (affiliate links😞 📅Blog Date Format plugin (Free by BeyondSpace) ⏬Lazy Load Summary Block plugin (by Squareswebsites) 📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon) 📈SEO plugin for Squarespace (by SEOSpace) ☕ Did I help? I like coffee (Thank you)
Ron_S Posted December 11, 2023 Author Posted December 11, 2023 This worked! Strangely, the issue was when they would click 'full screen' viewing on Chrome. The menu items would spread out vertically so much that the bottom option on any multi-option menu disappeared below the 'break.' But this tightens everything up and seems to be looking great on their end, so I'm calling it a win. Thank you!
melody495 Posted December 12, 2023 Posted December 12, 2023 You're welcome! 🙂 Glad it's working for you -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd When I have time, I like to help on the Forum, but if you need my full attention, please send your request here. Tools I use (affiliate links😞 📅Blog Date Format plugin (Free by BeyondSpace) ⏬Lazy Load Summary Block plugin (by Squareswebsites) 📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon) 📈SEO plugin for Squarespace (by SEOSpace) ☕ Did I help? I like 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