Two text lines on navigation buttons

[Tallyman]

I've noticed in all of the samples that there is only ever one line of text on navigation buttons. On the website that I am updating some of the button shave 2 lines simply because they would be too wide otherwise, but I cannot find any method of doing this within the program.

I know that I can create my own image to be used as buttons but there must be a way around this to do it automatically.

[Acorn]

I've noticed in all of the samples that there is only ever one line of text on navigation buttons. On the website that I am updating some of the button shave 2 lines simply because they would be too wide otherwise, but I cannot find any method of doing this within the program.
I know that I can create my own image to be used as buttons but there must be a way around this to do it automatically.

There are two ways to tackle this: modify an existing NavBar; create you own, as you've discovered..

For the first:
Double-click on the Navbar to open its Properties.
At the bottom left, click the Ungroup to edit graphics button.
You can now use the Text tool to enter a line break by pressing the Enter/Return key.
The problem you will face is the best way to deepen the button and then adjust the text to fit.
I use a mixture of Edit Inside, the PAge & layer gallery and setting the view quality back to outlines.
When happy, right click on the button and pick the create Navigation Bar... option.

You can do the same for a Stretch button.

For the second;
Personally, I find it easier to create a text box and build up a shape around that for the MouseOff layer.
When I have that right a copy it into the MouseOver layer and change the attributes.

If you have Designer, you can also make the button shape stretch to the text entered, both horizontally and vertically.

You then have to soft-group the layers (not forgetting MouseDown).

Finally, clone and enter the required text labels, remembering to ensure each button have the same number of text lines.

That said, I avoid the built-in NavBar capability and use MouseOff/MouseOver buttons to open Layers that open other Layers for deep sub-menus.
That way, my "buttons" can be anything I want.

I also prefer pure CSS3 Navbars, so I create these in a Placeholder: http://line25.com/tutorials/how-to-c...dropdown-menu; http://codepen.io/philhoyt/pen/ujHzd are some examples.
You need to understand HTML unordered lists and hyperlinks and also CSS to style the links.

Acorn

[Tallyman]

There are two ways to tackle this: modify an existing NavBar; create you own, as you've discovered..

For the first:
Double-click on the Navbar to open its Properties.
At the bottom left, click the Ungroup to edit graphics button.
You can now use the Text tool to enter a line break by pressing the Enter/Return key.
The problem you will face is the best way to deepen the button and then adjust the text to fit.
I use a mixture of Edit Inside, the PAge & layer gallery and setting the view quality back to outlines.
When happy, right click on the button and pick the create Navigation Bar... option.

You can do the same for a Stretch button.

For the second;
Personally, I find it easier to create a text box and build up a shape around that for the MouseOff layer.
When I have that right a copy it into the MouseOver layer and change the attributes.

If you have Designer, you can also make the button shape stretch to the text entered, both horizontally and vertically.

You then have to soft-group the layers (not forgetting MouseDown).

Finally, clone and enter the required text labels, remembering to ensure each button have the same number of text lines.

That said, I avoid the built-in NavBar capability and use MouseOff/MouseOver buttons to open Layers that open other Layers for deep sub-menus.
That way, my "buttons" can be anything I want.

I also prefer pure CSS3 Navbars, so I create these in a Placeholder: http://line25.com/tutorials/how-to-c...dropdown-menu; http://codepen.io/philhoyt/pen/ujHzd are some examples.
You need to understand HTML unordered lists and hyperlinks and also CSS to style the links.

Acorn

Many thanks for your comprehensive reply, shall work through the options and see which one gives the best results.

[Rut]

Hi friends !

How I can get two lines in "pop up menu style" in mobile version ? Pls check attached picture, how I can fix "pop up" sub menu and get two lines ?

(notice:site is antiporn)

[Egg Bramhill]

There have been several threads on this issue Rut.

Copy the complete link below, all of it, and paste it into your browsers search box.

site:www.talkgraphics.com/ + 2 lines text button

Don't click on it as a link, it doesn't work.

[Rut]

brother, I did it and I find no answer. I dont need 2 lines text button, I need the 2 lines pop up sub menu

[penmore]

Hi Rut,
Sorry you are having so much bother - have a look at the file below - is this what you want.
Pete

[Acorn]

Hi Rut,
Sorry you are having so much bother - have a look at the file below - is this what you want.
Pete

No the OP want the sub-menu text to wrap across two lines.

The Xara approach does not allow a line break in the sub-menus, I have typed in 200 characters and all you get is a long line.

I am sure it is possible to write CSS to limit the SPAN tag width to a fixed width so text might wrap.
It would probably be playing around with lists with classes of form "xr_nb*".

The better way is to not use Xara's Navbar but to build up your roll-overs with discrete Buttons and use of Layers to get this effect.
gwpriester has done a number of these previously.

Acorn

[penmore]

brother, I did it and I find no answer. I dont need 2 lines text button, I need the 2 lines pop up sub menu

Acorn, the above is what the member posted in their last post - 2 lines popup sub menu - seems pretty clear to me.

Why don't you just let the user answer my question.

Thanks,
Pete

[Egg Bramhill]

On the website that I am updating some of the buttons have 2 lines simply because they would be too wide otherwise, but I cannot find any method of doing this within the program

Which implies he requires buttons with two lines of text

I know that I can create my own image to be used as buttons but there must be a way around this to do it automatically.

No, there isn't.