Joomla Templates Club 406,261 posts

[Bob Meetin Friend Bob MeetinJoin date: September 2014Posts: 130Downloads:0Uploads:12 Thanks: 6 Thanked: 5 times in 1 posts]

#165833

I need to make the width the larger for the drop-down menu items so that text does not fall onto multiple lines. Normally I would do that by adding or modifying the width in the CSS menu style sheet, but when I do that (both the default menu css.css and core/theme css.css) I am getting weird results upon hover. There must be a missing style. What styles do I need tochange and/or add to make this work?

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#399406

Please post a link to your site so we can see the problem. Please make sure css optimization is set to “No” in the temlplate manager so we can see the correct css to adjust.

[Bob Meetin Friend Bob MeetinJoin date: September 2014Posts: 130Downloads:0Uploads:12 Thanks: 6 Thanked: 5 times in 1 posts]

#399420

http://174.121.22.85/~shuman/

Thanks, I would expect that widening the drop-downs should be fairly generic. CSS optimization is set to no. I usually enable this stuff after I set a site live. I reverted my intended changes as they weren’t working. If you can show me the CSS code to add, assuming the stylesheet is fairly vanilla, that should do.

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

#400052

Hi bobmeetin ,
you can change it following way below :
Open css.css file in templates/ja_droid/core/themes/shuman/css/menu folder,
Find following code section at about line 105 :

#ja-cssmenu li ul {
width: 269px;
}

change to :

#ja-cssmenu li ul {
width: 299px;
}

contninue find following code section at about line 66 “

#ja-cssmenu li ul li {
border-bottom: 1px solid #43520C;
border-top: 1px solid #6C7F26;
}


change to :

#ja-cssmenu li ul li {
border-bottom: 1px solid #43520C;
border-top: 1px solid #6C7F26;
width: 285px;
}

Hope can help you.

1 user says Thank You to Sherlock for this useful post

1. Phill

[Bob Meetin Friend Bob MeetinJoin date: September 2014Posts: 130Downloads:0Uploads:12 Thanks: 6 Thanked: 5 times in 1 posts]

#400343

Thanks, I figured this out about the same time as you replied but have been slow to add the details. It took a little more than what you said. I didn’t need to go quite that wide, but same philosophy:


/* Bob to widen dropdown menu */
#ja-cssmenu li li {
width: 258px;
}

#ja-cssmenu li ul {
width: 269px;
}

#ja-cssmenu li ul li a:link,
#ja-cssmenu li ul li a:visited,
#ja-cssmenu li ul li a:focus,
#ja-cssmenu li ul li a:active,
#ja-cssmenu li ul li a:hover {
width: 240px;
}

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

#400459

ok bobmeetin

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#400517

<em>@bobmeetin 250882 wrote:</em><blockquote>http://174.121.22.85/~shuman/

Thanks, I would expect that widening the drop-downs should be fairly generic.</blockquote>

Thanks for keeping us updated. We always ask to see the customers site simply because we do not know if changes have already been made. Often a generic reply will work on an unmodified site but can screw up a modified site.

Glad you have your problem resolved and be sure to come back and showcase your site when it is finished.

1 user says Thank You to Phill for this useful post

1. Bob Meetin

[Bob Meetin Friend Bob MeetinJoin date: September 2014Posts: 130Downloads:0Uploads:12 Thanks: 6 Thanked: 5 times in 1 posts]

#400563

Yes this is resolved. I had to tinker with the widths and had to add the following CSS to keep it consistent with the various states:

#ja-cssmenu li ul li a:link,
#ja-cssmenu li ul li a:visited,
#ja-cssmenu li ul li a:focus,
#ja-cssmenu li ul li a:active,
#ja-cssmenu li ul li a:hover {
width: 240px;
}

The width is relative to the other widths, so a little math should make this work for others hopefully. Maybe I had done something else which I don’t remember to make this necessary, no matter now we’re good to go. Thx, Bob

1 user says Thank You to Bob Meetin for this useful post

1. Phill

[Author]

Posts