dropdown width

In this forum I read that there is no way to control the width of the dropdown-menu: https://www.gavick.com/forums/university/dropdown-widths-44870?p=224890&hilit=dropdown#p224890
I guess there is no way to control the width for Steak House-template as well, is it?
I'd like to avoid line break by increasing the width of dropdown.

Hi

In the topic You are referring to Oscar mentioned that it is possible with CSS. In menu items there is an option to set an extra class for this element, than You will be able to overwrite the width.

Code: Select all

.EXTRA_CLASS .childcontent {
width: 300px !important;
}


maybe some more code, hard to tell without looking into the code.

I added the code as mentioned (-> screenshot) but it has no effect in the dropdown-menu (stays at 234px).

Hi

It's a wrong place to put this. Please send me an access to joomla panel so I'll make it for You and show how to do this after.

Thank you for the offer. Unfortunately I'm not allowed to give away some access-data - I'm really sorry about that.
Isn't there another way to explain how to fix?

Hi

I will try.

Please remove what You've placed in template settings and presented in screen. It's a very bad place to put it.

Now go to menu manager. Edit the link which is above the submenu and in Menu Params (GavickPro) section add Your class name (think of a name, do not use EXTRA_CLASS as in screenshot) in Additional Class. For example put put a name "width220".

Than add to override.css a css code:

Code: Select all

.width220 .childcontent {
width: 220px !important;
}


Thank you so much for support, I really appreciate it.
I did the modifications as you descriped but they have no effect on the dropdown-width.
Here is my override: http://install.diesaftpresse.de/templat ... erride.css
On screenshot below you see my Menu Params (GavickPro)-section.

Hi

In override.css file You have copied the code into wrong place. By accident it went between:

Code: Select all

@media (max-width: 640px){
}


so it only works on screens smaller than 640px. Try move it outside this area and add this as well:

Code: Select all

.width400 .childcontent .gkcol {
    width: 100%;
}


Thank you for support, teitbite. I changed the override and now it's working like it should.
Topic solved.

Hi

Ok, great to hear that. Happy I could help Thread closed.