Joomla Templates Club 406,261 posts

[ebajh69 Friend ebajh69Join date: December 2005Posts: 36Downloads:6Uploads:8 Thanks: 7 Thanked: 4 times in 2 posts]

#126181

Some of my titles for menu itmes are a little long and they are being displayed as 2 lines as opposed to a single line. This becomes a bit confusing to view. Is there a way to fix this?

Template: JA Hedera
Joomla: 1.5.1
Site: http://69.89.19.31/lcs1
1034
In the attached jpg you can see 5 different menu items under Online Courses. In reality there are only 3. The first 2 have titles that seem to be to long to display on a single line and as a result are being displayed on 2 lines. Is there any way to adjust the number of characters per line? :confused:

Thanks,

Evan

---

Attachments:

1. 

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#241145

Bit strange this, if it is the length of characters, as Child Abuse Prevention has more letters than Blood Borne Pathogens but Blood Borne Pathogens takes up slightly more space, could you make Blood Borne one word or take the s off Pathogens to see if this changes anything?

Which menu type are you using?
Have you thought of trying split menu or dropline?

[ebajh69 Friend ebajh69Join date: December 2005Posts: 36Downloads:6Uploads:8 Thanks: 7 Thanked: 4 times in 2 posts]

#241178

If I take off the S from Pathogens it fits on a single line.

The problem only seems to exist on the “moo” menu type. The other 2 menu types (split and dropline) display fine. I like the moo menu type better. Any suggestions on fixing the display for the moo menu type?

Thanks for the speedy respone 🙂

Evan

[geoaspro Friend geoasproJoin date: March 2006Posts: 23Downloads:0Uploads:3 Thanks: 8 Thanked: 1 times in 1 posts]

#246539

I have the same problem. Is there a way to automatically adjust the line width?

[Khanh Le Moderator Khanh LeJoin date: November 2013Posts: 1884Downloads:41Uploads:31 Thanks: 44 Thanked: 203 times in 131 posts]

#250413

With css/moo menu, the line width cannot automatically adjust.
In this case, you have 2 options:
1. Adjust your menu item to have a shorter text. It is very easy for you.
2. Increase the width of sub menu. You could open css file templates/ja_hedera/ja_menus/ja_cssmenu/ja-sosdmenu.css, and increase width of some style as follow:


#ja-cssmenu li ul {
width: 16.4em;
position: absolute; /* second-level lists */
z-index: 99;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
height: auto;
width: 15.9em;
}

#ja-cssmenu li li {
padding: 0 1em 0 0;
margin: 0;
width: 14.9em;
}

#ja-cssmenu ul a {
width: 14.8em;
width: 10.8em; /*Increase this one first*/
}


[ebajh69 Friend ebajh69Join date: December 2005Posts: 36Downloads:6Uploads:8 Thanks: 7 Thanked: 4 times in 2 posts]

#250488

In this case, you have 2 options:
1. Adjust your menu item to have a shorter text. It is very easy for you.

I can’t make it shorter. I need to give a description.

2. Increase the width of sub menu. You could open css file templates/ja_hedera/ja_menus/ja_cssmenu/ja-sosdmenu.css, and increase width of some style as follow:

I increased the width, but it only changes the width of the submenu when it is highlighted and the text is still wrapped.

You can see it at http://69.89.19.31/lcs1/.

Thanks,

Evan

[friends1976 Friend friends1976Join date: April 2008Posts: 27Downloads:0Uploads:0 Thanks: 4 Thanked: 1 times in 1 posts]

#270372

<em>@ebajh69 55171 wrote:</em><blockquote>In this case, you have 2 options:
1. Adjust your menu item to have a shorter text. It is very easy for you.

I can’t make it shorter. I need to give a description.

2. Increase the width of sub menu. You could open css file templates/ja_hedera/ja_menus/ja_cssmenu/ja-sosdmenu.css, and increase width of some style as follow:

I increased the width, but it only changes the width of the submenu when it is highlighted and the text is still wrapped.

You can see it at http://69.89.19.31/lcs1/.

Thanks,

Evan</blockquote>

These are the settings I used….

<blockquote>
#ja-cssmenu li ul {
width: 16.4em;
position: absolute; /* second-level lists */
z-index: 99;
left: -999em; /* using left instead of display to hide menus because display: none isn’t read by screen readers */
height: auto;
width: 26.8em; /*Makes Grey Hover Width Change*/
}

#ja-cssmenu li ul ul {
margin: -1.9em 0 0 15.5em; /* third-and-above-level lists */
}

#ja-cssmenu li li {
padding: 0 1em 0 0;
margin: 0;
width: 25.9em; /*Adjusts the width of the Home Sublinks when hovered over*/
}

#ja-cssmenu ul a {
width: 14.8em;
width: 24.8em; /*Makes Grey Hover Width Change*/
}

</blockquote>

[Author]

Posts