This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Increase menu spacing – main navigation – to prevent word wrap.

Resolved 18 replies premiumthemetheme-vantage
kdm-site
10 years ago · Last reply by Andrew Misplon 10 years ago

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/

URL: http://bureau.langleyharper.com/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

18
  1. Andrew Misplon Staff 10 years, 10 months ago

    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.

  2. kdm-site 10 years, 10 months ago

    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!

  3. kdm-site 10 years, 10 months ago

    Oops, just realized I don’t have code for spacing — Do I need “padding: 15px;”?

  4. kdm-site 10 years, 10 months ago

    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!

  5. Andrew Misplon Staff 10 years, 10 months ago

    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.

  6. Andrew Misplon Staff 10 years, 10 months ago

    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?

  7. Andrew Misplon Staff 10 years, 10 months ago

    Can set that as required, just keep them the same.

  8. kdm-site 10 years, 10 months ago

    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.

  9. kdm-site 10 years, 10 months ago

    With this issue I”m focusing on the “Speakers Bureau” — hoping to get peoples names and titles (ie PhD) on same line.

  10. Andrew Misplon Staff 10 years, 10 months ago

    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.

  11. kdm-site 10 years, 10 months ago

    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)

  12. Andrew Misplon Staff 10 years, 10 months ago

    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.

  13. kdm-site 10 years, 10 months ago

    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!

  14. Andrew Misplon Staff 10 years, 10 months ago

    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.

  15. Andrew Misplon Staff 10 years, 10 months ago

    Sorry, it’s late here. You’re asking about drop downs. That’s different my bad. One moment.

  16. Andrew Misplon Staff 10 years, 10 months ago

    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.

  17. kdm-site 10 years, 10 months ago

    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.

  18. Andrew Misplon Staff 10 years, 10 months ago

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

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread