Top Nav Bar - Force text on to new line

Try to increase left-right padding around links.

In this URL all menu items are with different widths. And is not done by theme, but by developer manually, Theme cannot guess what words will be in menu items.
Something I doubt Themler will ever be able to do. But you can make the same manually. Now you can add custom classes to menu items.

Hello,
the text of menu items may be split into two or more lines using combination of Themler settings and custom CSS code. Here is an example applied to default Themler theme:
1. open Menu tab of Horizontal Menu control and open Arrange. There set Max width to desired value and set 'White-space' option to "pre", e.g.:

2.in addition to it add the following CSS code under Settings >> Additional CSS

.bd-menu-3.nav-pills .bd-menuitem-3 > a, .bd-menu-3.nav-pills .bd-menuitem-3 > a:link, .bd-menu-3.nav-pills .bd-menuitem-3 > a:visited{
  word-break: break-word;
}

Regards,
Aileen

Nice!

However I did this in the Desktop version in a HTML5 site without the custom css. Has this changed in newer versions?

How do I make all the menu items the same height and center the text vertically?

Thanks

Last edited 01 March 2016 by DaveOzric

You can try setting Item's Height, however, the vertical align is not yet adjustable.

Thank you!

Any chance it will be an option in a new version?

Hello,

I'd like to see this feature in an upcoming update. But it would be much simpler if we could add a code directly into the CMS.

Thank you

I can't get this to work anymore. Can you please verify and give new instructions?

Hello,

I'd like to see this feature in an upcoming update. But it would be much simpler if we could add a code directly into the CMS.

Thank you

Themler menu Walker is very specific and customized. Dont go there and think you can easy replace Themler menu with custom PHP code. You will get very basic menu and all styling you have to do self.

Hi,

My code was missing of the message, I meant this code /br.

Hello guys!
I've added relevant suggestion to our wish list and it will be considered for the future versions.

Regards,
Aileen

Hello,
here is updated solution for current Themler version
1.no additional custom CSS;
2.open Horizontal Menu >> Menu Item options and set
Width
Height
White-space: pre-line

Regards,
Aileen

Hello, back to this again, the solution works but is it possible to center the text vertically? It looks weird aligned to the top.

Thank you

Hi,

Have you tried the Vertical Align option for the menu item? If that does not help, provide your theme exported with the content and editor included.

Sincerely,
Hella

Hello, I would try this but have not seen such a setting. Can you provide instructions on where this is?

Hi,

I meant the Vertical Align option as on the screen shot several messages above:

It's in the right bottom corner.

Sincerely,
Hella

Doesn't work for me. There are some requirements in the vertical align settings I don't understand.

Hi,

Please export your theme with the content and editor included and attach it to the ticket, we'll look into the settings.

Sincerely,
Hella

Thank you

Any word on this?