[yifanzhouParticipant]

Hi,

The website I am setting up is http://www.createwebsite4u.com/educament/

There is the English menu and then there’s the Chinese one.

How do I force a line break on the English nav menu items (word wrap) so that it doesn’t look so cramped and also I can fit more items in the menu?

I only need this for non-mobile display.

Thanks.
Ivan

[Rue NelModerator]

Hello There,

Thanks for posting in!

To force a line break on the English nav menu items, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

@media screen and (min-width:768px){
    html[lang="en-US"] .x-navbar .x-nav-wrap .x-nav > li > a {
      word-break: break-all; 
    }
}

hope this helps.

[yifanzhouParticipant]

Hello there,

Thanks for prompt support. I just tried adding your css code to Customizer and style.css one after another. It doesn’t seem to work.
Perhaps I didn’t explain it well what I wanted to achieve. For each nav menu item, I wanted to show the 2nd word (if applicable) below the 1st word. That way, I can have more menu items in the same space and the menu bar will appear less crowded.

I mean I am able to achieve a desired result by inserting ‘<br>’ between the words (see my ‘Foreign Studies’ on http://www.createwebsite4u.com/educament/) but it would be much better to line break on only desktop or laptop or non-mobile screens.

I hope that helps you help me. Thanks.
Ivan

[Paul RModerator]

Hi Ivan,

Please replace the codegiven above with this.

@media screen and (min-width:979px){
    html[lang="en-US"] .x-navbar .x-nav-wrap .x-nav > li > a {
         word-break: keep-all;
    }

    html[lang="en-US"] .x-navbar .x-nav-wrap .x-nav > li.menu-item-6795 {
         max-width:110px;
    }

    html[lang="en-US"] .x-navbar .x-nav-wrap .x-nav > li.menu-item-6969 {
         max-width:160px;
    }

    html[lang="en-US"] .x-navbar .x-nav-wrap .x-nav > li.menu-item-6865 {
         max-width:110px;
    }

    html[lang="en-US"] .x-navbar .x-nav-wrap .x-nav > li.menu-item-6779 {
         max-width:80px;
    }
}

Hope that helps.

[yifanzhouParticipant]

Thanks for nice code! It works beautifully!

Thanks.
Ivan

[DarshanaModerator]

Glad we were able to help 🙂

[Author]

Posts