Joomla Templates Club 406,261 posts

[joolzhaines Friend joolzhainesJoin date: July 2008Posts: 20Downloads:0Uploads:0]

#134239

Hi,

In the top menu is is possible to make the sub menu drop downs wider, at the moment if the text is too long then it goes onto two or more lines. I hope this is clear

Thanks for your help
Joolz

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

#274554

Can you give us your live URL, any screenshot or more details of the problem will be helpful

[joolzhaines Friend joolzhainesJoin date: July 2008Posts: 20Downloads:0Uploads:0]

#274566

Hi,

http://www.bremic.co.uk/
Username and password is user

As you will see I have only one sub menu at the moment for test purposes but you will see the link is on two lines, I assue this is because it is going by the grey background width

Thanks

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

#274574

I can’t view your site
wrong account

[joolzhaines Friend joolzhainesJoin date: July 2008Posts: 20Downloads:0Uploads:0]

#274577

hi,

I have put the site online for you,

Thanks

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

#274579

Please edit like :
1.ja-sosdmenu.css (line 40)

#ja-cssmenu li ul {
height:auto;
left:-999em;
position:absolute;
width:19.9em;--> change like this or increase as you want
z-index:99;
}

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

#274580

2.ja-sosdmenu.css (line 53)
#ja-cssmenu li li {
margin:0;
padding:0 1em 0 0;
width:19.9em;–> change like this or increase as you want

}

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

#274581

3.ja-sosdmenu.css (line 59)

#ja-cssmenu ul a {
width:19.8em;change like this or increase as you want
}

[joolzhaines Friend joolzhainesJoin date: July 2008Posts: 20Downloads:0Uploads:0]

#274582

Thanks for your help

One other question, why do I have to change it in three places? what are the “li ul a” options I hve not seen them in CSS before?

Joolz

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

#274583

That is css for submenu in /templates/ja_mageia/ja_menus/ja_cssmenu/ja-sosdmenu.css

[joolzhaines Friend joolzhainesJoin date: July 2008Posts: 20Downloads:0Uploads:0]

#274671

Thanks for your help, I tried to edit the file as desctibed but the sections do not match, the lines are below, how do I edit these to make the sub menu twice as big

Thanks
Joolz

#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 ul ul {
margin: -1.25em 0 0 12em; /* third-and-above-level lists */
}

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

#ja-cssmenu ul a {
width: 14.8em;
width: 10.8em;
}

[joolzhaines Friend joolzhainesJoin date: July 2008Posts: 20Downloads:0Uploads:0]

#274672

Hi,

I tried to edit as you said but the sections are different to your examples, below are the lines in my file how do I edit to make sub menu twice as big so text does not go on two lines, can it be set to auto fit?

Regards
Joolz

#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 ul ul {
margin: -1.25em 0 0 12em; /* third-and-above-level lists */
}

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

#ja-cssmenu ul a {
width: 14.8em;
width: 10.8em;
}

[joolzhaines Friend joolzhainesJoin date: July 2008Posts: 20Downloads:0Uploads:0]

#274686

<em>@joolzhaines 85060 wrote:</em><blockquote>Hi,

I tried to edit as you said but the sections are different to your examples, below are the lines in my file how do I edit to make sub menu twice as big so text does not go on two lines, can it be set to auto fit?

Regards
Joolz

#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 ul ul {
margin: -1.25em 0 0 12em; /* third-and-above-level lists */
}

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

#ja-cssmenu ul a {
width: 14.8em;
width: 10.8em;
}</blockquote>
hi,

Another question, how can I change the orange text in the left module to black

thanks for all you help

Joolz

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

#274707

Change from

#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 ul ul {
margin: -1.25em 0 0 12em; /* third-and-above-level lists */
}

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

#ja-cssmenu ul a {
width: 14.8em;
width: 10.8em;
}

to

#ja-cssmenu li ul {
width: 19.9em;
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: 19.9em;
}

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

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

#ja-cssmenu ul a {
width: 19.8em;
width: 19.8em;
}

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

#274708

<blockquote>Another question, how can I change the orange text in the left module to black</blockquote>

Change orange.css (line 15)(templates/ja_mageia/css/colors/orange.css)

a, a:hover, a:active, a:focus {
color:#E38100;--> change it as you want
}

[Author]

Posts