SOLVED: <br> in menu text

[Coolarm]

Hi,

Is it possible to put a line break in a menu text?
I have a menu in two languages and I want to force the text on to two lines. One language over the other.

I've got it kind of working by setting the width but it doesn't work for the shorter menu titles. Here's the site I'm working:
www

C

vers - cmsmadesimple-1.6.6

[stijlXpres]

Hi Coolarm,

That's a though question. When I look at the source of your site I see you just use a space, and to be honest I don't think there is a other way..

But...

What I would do to make it look like the way you want to, I would just introduce 2 menu's, one in Norwegian (if I'm correct?) and one in English.
The first menu will be the menu like you have it now, but only in 1 language, and the second row will be just be with internal links instead of content-pages. To make it work you also have to change the structure of your menu:

Code: Select all

1. English (don't show this page in the menu)
  1.1. Welcome (content page)
  1.2. Products (content page)
  1.3. ...
2. Norge (don't show this page in the menu)
  2.1. Velkomen (internal link to 1.1.)
  2.2. Produker (internal link tot 1.2.)
  2.3. ...

And now the menu has to be called in the templates like this:

Code: Select all

  {menu start_element="1.1" show_root_siblings="1"}
  {menu start_element="2.1" show_root_siblings="1"}

This way you show 2 menu's, but with some smart usage of styling and CSS you make it look like one!

[Nullig]

have you tried padding the right more for that element:

#primary-nav li a {
...
padding: 12px 35px 15px 15px;
...
}

Nullig

[Coolarm]

Thanks for the help stijlXpres. Looks the two menu option is going to work.

Thanks again.
C

[Nullig]

The two menu way will cause problems if you want submenus. Here's a better solution.

Create a new Menu Template in Menu Manager named "Two Line Menu", with the following code:

Code: Select all

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
<li class="menuparent">
<a class="menuparent" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="sectionheader"><span class="sectionheader">{$node->menutext|replace:'/':'<br />'}</span>{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />{else}
<li>
<a {/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext|replace:'/':'<br />'}</span></a>
{elseif $node->type == 'sectionheader'}
><span class="sectionheader">{$node->menutext|replace:'/':'<br />'}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

This is basically the cssmenu with a replace modifier.

In your page template, replace the menu call with:

{menu template='Two Line Menu'}

On your pages, edit the Menu Text to be:

Welcome/Velkomen
Products/Produker
etc.

The modified "Two Line Menu" template will replace all occurrences of "/" with "
".

This will maintain the proper operation of submenus, should you need them.

Nullig