Home>Support>Wrap text in navigation menu bar

Wrap text in navigation menu bar

By thebookhutter, 9 years ago. Last reply by Magus, 9 years ago.

Hi there,

Sorry to ask more questions…

I would like to wrap the text in my navigation bar so that I can get more menu options on the same line without reducing the font size.

Is there a nifty way of doing this?

Many thanks and all the best,
Maudie

URL: http://www.maudiemade.com

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 2 months ago Magus
    Hi, I Work Here

    Hi Thebookhutter

    Very sorry about the late reply. We work through a prioritized forum queue, and unfortunately it’s taken us some time to get to your thread.

    https://siteorigin.com/about/forum-thread-prioritization/

    You can achieve this with some custom CSS. Please navigate to Appearance->Custom CSS and add the following

    #menu-main-menu > li, #top-area .menu > ul > li {
        word-wrap: break-word;
        max-width: 125px;
    }
    

    You can change the max-width value to fine tune the layout to what you require.

    let us know how you get on

    Magus

  2. 9 years, 2 months ago thebookhutter

    Hi Magus,

    Thanks very much for this – it sorted the problem out a treat. I also added the following CSS to get the text to align centrally:

    #menu-main-menu > li,
    #top-area .menu > ul > li {
      text-align: center;
      vertical-align: middle;
    }
    

    Thanks again and all the best,
    Maudie

  3. 9 years, 2 months ago Magus
    Hi, I Work Here

    Hi Maudie

    Glad to hear it helped. If you need any more help please feel free to open a new support thread.

    Magus

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More