I want to increase space between menu items so I don’t get wrapping of page titles.
I tried to fix presented here to no avail: https://siteorigin.com/thread/adjust-space-between-menu-items/
Increase menu spacing – main navigation – to prevent word wrap.
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Kdm-site
The following selector in your Custom CSS is missing a closing curly bracket, nothing inserted after it will work:
.main-navigation { margin: 0 -35px; background: #343538; font-size: 14px; font-family: "Trebuchet MS", Helvetica, sans-serif; position: relative;Hope that helps.
OMGosh — I hate it when that happens!! Thank you for finding my bad. Doh!
That takes care of my other thread re: Archives title too!
You rock!
Oops, just realized I don’t have code for spacing — Do I need “padding: 15px;”?
Okay, I do have code. (Brain is fried.) The padding is increasing but the field size (page name) isn’t. So I”m still getting word wrap in menu.
Thanks!
No worries. Ok, so to confirm, the selector I pasted above, with the missing curly bracket, that’s not the one to edit to decrease spacing in menu items. Let me go grab that.
A bit further down you have it:
/* Menu Padding Horizontal */ .main-navigation ul li a { padding-right: 25px !important; padding-left: 25px !important; }Were you adjusting that and still not winning?
Can set that as required, just keep them the same.
Yes, I’m adjusting that and getting more padding but the field doesn’t grow. Interesting, if I set to 20px, the text wraps less; I set to 50px and there’s an obvious increase in padding and the words wrap more.
With this issue I”m focusing on the “Speakers Bureau” — hoping to get peoples names and titles (ie PhD) on same line.
I wouldn’t decrease padding more than that. I recommend upping the mobile menu collapse point to 750. You can do this from Appearance > Theme Settings > Navigation. 750 is where the second line is currently occurring, given the menu with the padding I just viewed.
So I have:
.main-navigation ul li a {
padding-right: 25px !important;
padding-left: 25px !important;
}
in Custom CSS and have changed Mobile to 750.
I don’t see any change to my site — I’m on a 21″ monitor. (Just wondering how mobile settings would effect this issue)
Are you trying to stop the menu from dropping onto a second line? That’s what I’m discussing. Looking at it now, you’d need to up the collapse to 815 to stop it going onto a second line. 815px is the point, more or less, that the menu runs out of available space and drops onto a second line. If menu padding, left and right, was default and not the 25px you’ve changed it too, then this would happen sooner.
Perhaps you can explain again what you’d like to achieve, sure I can get it sorted for you.
Yes, stop the menu ITEM from wrapping — If you goto Speakers Bureau, Hover over “Health Care Professionals”, you’ll see “Carey Roth Bayer, Ed.D, RN, CSE”; I want this on one line.
What is the default padding?
Help me understand how the Mobile setting effects my desktop display. Thanks!
The mobile menu setting inserts CSS into the head that changes the breakpoint at which the regular menu becomes a mobile menu. At 480, the menu collapses into a mobile menu at 480px. At 800, the mobile menu will appear when the screen is 800px wide etc.
Sorry, it’s late here. You’re asking about drop downs. That’s different my bad. One moment.
Here we go:
/* Vantage Sub Menu Width */ .main-navigation ul ul a { width: auto !important; } .main-navigation ul ul li { min-width: 250px; white-space: nowrap; width: 100%; }Adjust 250px as required.
You can remove everything else we’ve added. Sorry about that. Working past my effective time here.
Bingo. Thanks for your help and quick response.
Where are you located?! (I’m East Coast US — 6:42 pm) It’s gotta be past 5 oclock for you! :)
Thanks again.
Phew, sorry it took so long to get to that. Glad we could resolve in the end.
We’re down in Cape Town, South Africa at GMT+2, so a late one.
All the best. Let us know if you run into any further challenges you can’t solve.
Cheers :)