Design and CSS styles
Version 4.x > Design and CSS styles > Line Break in Horizontal Menu View modes: 
User avatar
Member
Member
HuangDi - 9/8/2009 4:12:46 AM
   
Line Break in Horizontal Menu
I need to do a line break in the menu item text.
I don't want the menu header to be a long line, but to wrap the text for two lines.

I tried the "min-width" in the CSS. it works fine on IE, but doesn't work on FF.

Is there any other way?

Thanks!

User avatar
Member
Member
kentico_pavelk - 9/8/2009 9:37:27 AM
   
RE:Line Break in Horizontal Menu
Hello,

Have you tried Word wrap property of the menu web part? This should help you.


Best Regards,
Pavel Knotek

User avatar
Member
Member
HuangDi - 9/8/2009 9:55:01 AM
   
RE:Line Break in Horizontal Menu
Hi,
Yeah it was checked already, but with didn't help.

I changed the CSS a bit,

changed: padding: 3px;
added: line-height: 80%;

would that affect it?



User avatar
Kentico Developer
Kentico Developer
kentico_ondrejv - 9/11/2009 9:07:46 AM
   
RE:Line Break in Horizontal Menu
Hello,

I don't think this could affect that. However I'm not 100% sure since I don't know what menu do you use? CSS List Menu? Drop Down Menu? Please let us know to be able to reproduce it. Also the export of the webpart would be useful.

How long is appropriate menu item name (which is shown within the menu)?

What version do you use? Which hotfix?

Another thing came up on my mind - just to make things clear - are we talking about menu items wrapping or webpart container title wrapping?

Best Regards
Ondrej Vasil


User avatar
Member
Member
HuangDi - 11/2/2009 5:37:42 AM
   
RE:Line Break in Horizontal Menu
Hey, I know it has been a long time ago (didnt notice the reply) but I'll appreciate your support.

kentico version: 4.0
Menu type: drop down menu
Some of the items are long, and some short with short words.

Regarding the last question, I can only check the box of wrapping in the webpart container, not in any other place.

The webpart properties are as follow:


Webpart properties (Drop-down menu)

Alias path: /
Zone ID: zoneMenu


Content


Path: /%

Highlighted document path:


Content filter


Document types:

Combine with default culture:

Culture code:

Maximum nesting level: 2

ORDER BY expression:

Select only published: True

Site name:

WHERE condition:

Filter name:


Design


CSS prefix: horizontal;horizontalsub

Cursor: 1

Highlight all items in path: True

External script path:

Layout: horizontal

Render item name: False

Render image alt: True

Padding: 0

Spacing: 0

Submenu indicator image:

Use alternating styles: False

Use item images for higlighted item: False

Apply menu design: True

Enable RTL behaviour: False

Enable mouse up/down class: True

Word wrap: True

Encode menu caption: True


Menu item separator


Separator CSS class:

Separator height:

Separator text:


No data behavior


Hide if no record found: True

ZeroRowsText: No data found


System settings


Check permissions: False

Cache item name:

Cache minutes:

Cache dependencies: ##NONE##





I also wrap it with content before:

<div class="horizontalmenu">

(I did it as I wanted a different color for the hovering - this css class indicates the basic color of the menu in 100% width)

and content after:

<div></div><div style="background-color:#EC870E; height:11px;"></div></div>

User avatar
Kentico Developer
Kentico Developer
kentico_ondrejv - 11/10/2009 3:58:46 AM
   
RE:Line Break in Horizontal Menu
Hello,

would it be possible to see that menu on your live site (if any)? Eventually could you please post here some screenshots, where we can see this behavior?

Best regards
Ondrej Vasil

User avatar
Member
Member
HuangDi - 11/10/2009 5:46:45 AM
   
RE:Line Break in Horizontal Menu
My solution doesn't work on FF thought. The firefox doesn't refer to the menu design in mouseover, it's quite a freaky situation - it jumps back and forth from 120px to 100% on mouseover.

Is it a known isuue with FF? can it be solved?

User avatar
Kentico Developer
Kentico Developer
kentico_ondrejv - 11/23/2009 7:25:25 AM
   
RE:Line Break in Horizontal Menu
Hello,

It's really hard to say what could be wrong since we can't see this menu "in action". Though, I have one thing on my mind - it's possible that the style is overwritten in Firefox, so you could try to add !important property to the CSS style.

Best regards
Ondrej Vasil

User avatar
Member
Member
HuangDi - 11/10/2009 4:07:28 AM
   
RE:Line Break in Horizontal Menu
Hi, I was just about to publish this post.

So my solution was adding that:


line-height:95%; /* in my case menu height was 27px so I needed that, I guess no need in bigger heights values */
text-align:center; /* for some reason the text aligns to left when applying this code */
max-width:120px; /* for my site */


The problem - it fits only the longest text button - in my case it was 120px.

If u want to make double line menu button for shorter lines of text, then you have to specify the exact width for each button so you can make the line break.

go to CMS DESK-->(your menu item)-->Properties-->Menu-->Menu Item Design-->Menu Item style-->width: 60px (for example).
do the same for Menu item design - highlighted and etc, depends on your needs.

play with it until you see when there is enough lack of space to make the lines break.