Jump to content

How to reduce spacing between items in a flexbox menu?

Go to solution Solved by melody495,

Recommended Posts

Posted (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 by NorseCr
  • Replies 8
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

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 🧩

Posted

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)

Posted

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
Posted
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)

Posted

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!

Posted

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)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.