Joomla Templates Club 406,261 posts

[dozza Friend dozzaJoin date: October 2007Posts: 149Downloads:0Uploads:21 Thanks: 16 Thanked: 8 times in 1 posts]

#132690

Is there any way to have ‘line breaks’ in menu items/titles listed in the ‘main menu’.

For example, in the attached mock-up image, the menu item ‘Qualification & Entitlement’ is broken across two lines, rather than all in one line which would make the menu item extremely wide, and forces the whole main menu onto 2 lines.
Am I able to insert <br/> tags into the <li> elements??

Thanks in advance….:eek:

---

Attachments:

1. 

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#267800

Hi Dozza !
Please send url of your site . i have tested the problem in mageia quickstart , it is ok ,

[dozza Friend dozzaJoin date: October 2007Posts: 149Downloads:0Uploads:21 Thanks: 16 Thanked: 8 times in 1 posts]

#267825

Hainn

The live site is at http://www.lefp.co.uk/index.php althought the image grab is from my local MAMP development environment.

Appreciate any help.

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#267896

Hi Dozza !
I used firebug and change menu text in your site and the text always lies in a row , doesn’t break. Please view image attachment.

[dozza Friend dozzaJoin date: October 2007Posts: 149Downloads:0Uploads:21 Thanks: 16 Thanked: 8 times in 1 posts]

#267996

Hainn

My question was “Is there any way to have ‘line breaks’ in menu items/titles listed in the ‘main menu’?.

I want line-breaks in the <li> tem

My image was done in Photoshop to show how i would like it to appear! I know it currently stays all on one line but I do not want that. Any ideas?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#268398

Hi Dozza !
You can do it in menu manager :
You go to admin >> menus >> mainmenu >> YOu select menu item , what you want have breaks line , you add “<br />” tag in menu title .

[dozza Friend dozzaJoin date: October 2007Posts: 149Downloads:0Uploads:21 Thanks: 16 Thanked: 8 times in 1 posts]

#268484

I had tried this haiin but it wouldn’t work for me in Joomla 1.0 or 1.5 – I tried again following your post but it is stripped out when you apply or save.

I’m trying to do this on a new site at http://www.lefp.co.uk/index.php

I can emulte it using the Edit HTML function of WebDeveloper Firefox Plugin. I add a <br/> to the <span> within the <li>, although it adds a horrible white space below the menu! See below…

<div id="ja-mainnav">
<ul id="ja-cssmenu" class="clearfix">
<li><a href="/index.php?option=com_content&view=frontpage&Itemid=1" class="active first-item" id="menu1" title="Home"><span>Home</span></a></li>
<li><a href="/index.php?option=com_content&view=article&id=46&Itemid=53" id="menu53" title="Qualification & Entitlement"><span>Qualification <br/>& Entitlement</span></a></li>
<li><a href="/index.php?option=com_content&view=article&id=45&Itemid=54" id="menu54" title="Procedure"><span>Procedure</span></a></li>
<li><a href="/index.php?option=com_content&view=article&id=46&Itemid=55" id="menu55" title="Right to Manage"><span>Right to Manage</span></a></li>
<li><a href="/index.php?option=com_content&view=article&id=44&Itemid=56" class="last-item" id="menu56" title="Management"><span>Management</span></a></li>
</ul> </div>

Can you actually get it to display correctly by adding <br/> to the menu title in admin?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#268615

Hi Dozza !
Please send admin acc via pm , i will do it for you !

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#268811

Hi Dozza !
Please check it again ! It is ok now , Please go to admin >> menus >> mainmenu >> select Qualification
& Entitlement menu item for in more detailt .

[dozza Friend dozzaJoin date: October 2007Posts: 149Downloads:0Uploads:21 Thanks: 16 Thanked: 8 times in 1 posts]

#269579

So that is the trick!… to use

<br />

..rather than…

<br/>

No wonder it never worked for me!!

OK, so to remove the extra white space now below the mainmenu…

Would it be right to add -10px bottom margin to ja_mainnavwrap in template_css.css so it becomes…


#ja-mainnavwrap {
background: url(../../images/orange/dot.gif) repeat-y 218px 0;
margin-bottom: -10px;
}

:confused:

Seems to work. Whats your thoughts?

Thanks for your help all the same.

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#269601

Ok Dozza !
i will mark this thread to “solved”.

[dozza Friend dozzaJoin date: October 2007Posts: 149Downloads:0Uploads:21 Thanks: 16 Thanked: 8 times in 1 posts]

#269725

hainn

I’ve resolved the space that appears below the main menu in the header by adjusting the css as follows;

In template_css.css

#ja-mainnavwrap {
clear: both;
background: url(../images/dot.gif) repeat-y 218px 0;
margin-bottom: -14px;
}

and then in ja_sosdmenu.css

#ja-cssmenu li a {
margin: 0;
padding: 20px 10px 26px 40px;
line-height: normal;
display: block;
text-decoration: none;
text-transform: uppercase;
color: #556975;
border-right: 1px solid #D0D9DF;
font-weight: bold;
font-size: 80%;
}


To make the above work and keep things consistent, I had to put <br />’s in front of all the main menu item titles. So the main menu at the top looks ok now in most browsers, mac n PC (apart from Firefox on PC??).

However, the main menu that is displayed in ‘left’ shows all the <br />’s that we have inserted which doesn’t look good at all. Do you have any suggestions of a way around this? I’d really appreciate it.

[dozza Friend dozzaJoin date: October 2007Posts: 149Downloads:0Uploads:21 Thanks: 16 Thanked: 8 times in 1 posts]

#272102

I could do with some help on altering the look of the left menu, as described above. Anyone?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#274942

Hi Dozza !
sorry for delay ! if you want text of menu auto break line when it is very long you must fix width of link !
you do it following way below :

Open ja-sosdmenu.css file in templates/ja_mageia/ja_menus/ja_cssmenu folder, find following code section at about line 100 :


#ja-cssmenu li {
background:transparent url(../../images/dot5px-grey.gif) repeat-x scroll center top;
margin:0 0 0 1px;
}


change to :


#ja-cssmenu li {
background:transparent url(../../images/dot5px-grey.gif) repeat-x scroll center top;
margin:0 0 0 1px;
width:100px;
}


continue , find following code section at about line 82 :


#ja-cssmenu li a {
border-right:1px solid #D0D9DF;
color:#556975;
display:block;
font-size:80%;
font-weight:bold;
line-height:normal;
margin:0;
padding:20px 10px 26px 34px;
text-decoration:none;
text-transform:uppercase;
}

change to :


#ja-cssmenu li a {
border-right:1px solid #D0D9DF;
color:#556975;
display:block;
font-size:80%;
font-weight:bold;
line-height:normal;
margin:0;
padding:20px 5px 10px;
text-decoration:none;
text-transform:uppercase;
}


[dozza Friend dozzaJoin date: October 2007Posts: 149Downloads:0Uploads:21 Thanks: 16 Thanked: 8 times in 1 posts]

#275010

Hainn

Thanks for this – I should have thought of that earlier! I’ve noticed that the menu item 1px vertical borders on the shorter title don’t reach o the top of the header pic like the longer titles do. Also, the ‘hover’ style doesn’t cover the full depth of some menu items as well. Can these also be rectified?

I’ve also noticed that my main-menu that appears in the left column does not have the same styling as the left menu in the demo. Can you point out to me where it has lost it’s styling with the small bulletes etc?

[Author]

Posts