Top Nav Bar - Force text on to new line

Hi,

As I can see the alignment of the menu items works the same as in the provided example.
The easiest way to achieve the alignment you want is custom css. For example:

.bd-menu-1
{
display: flex;
display: -webkit-flex; /* Safari */
display: -ms-flexbox; /* IE 10 */
align-items: center;
-webkit-align-items: center;
}

Unfortunately Themler does not provide additional flexbox settings. Therefore you cannot set align-items property in Themler directly.

Another simple solution is:

.bd-menu-1.nav-pills > .bd-menuitem-1{
float: none;
display: table-cell;
vertical-align: middle;
}

Thank you,
Olivia

Guess you are only working on upage now days. :(

Any word on this?

Thank you

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

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

Hi,

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

It's in the right bottom corner.

Sincerely,
Hella

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

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, 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

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 guys!
I've added relevant suggestion to our wish list and it will be considered for the future versions.

Regards,
Aileen

Hi,

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

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.

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

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

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

Thank you!

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

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