Drop Down Menu Width ?

[atanasprodanov]

#632323

Hello guys and girls,

Anyone know the CSS or option needed to set particular drop-down menu width ?
In my case it must be the drop-down menu for the language choose (like in the picture)

Link to the website

[marklchaves]

#632335

Try

.fusion-main-menu .sub-menu {
    width: 100px;
}

If you learn how to use Chrome or Firefox dev inspector tools, it’s easy to find out which CSS class to manipulate. I don’t know how you are doing web dev without these tools. 😉

https://developers.google.com/web/tools/chrome-devtools/

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour

Hope this helps!

[marklchaves]

#632359

Sorry. I think 100px is too small. My mistake. Try 150px instead. Please play around with the width size if needed.

.fusion-main-menu .sub-menu {
    width: 150px;
}

Thanks for the great before/after screen captures and link to your site.

Good luck!

[atanasprodanov]

#632360

Hello Mark,
Thank you very much for the help. I would like to improve my skill with these tools and you are right that in this way I would fix my issues on my own.
Regaridng the css which you provided it do works, however it affects all of the drop-down menus. I am looking to reduce the width only for this particular one from the screenshot. I am not sure which is the right tag for this element , could you pelase assist me.

[atanasprodanov]

#632381

Update*
I managed to affect only this particular drop-down menu by installing CSS Classes plugin in avada. By doign this I can set custom class and assign it under Dashboard -> Appearence -> Menus and imput the custom class under the desired drop-down menu.
The only problem is that it doesnt affect the width of the menu but only the highlight width as shown on this screenshot :

.languages {
    width: 150px !important;
}

This is the code that affects only the highlight width, however the overall width stays constant for all drop-down menus. Really frustrating…

[marklchaves]

#632454

Hi,

Let’s scratch my idea. Sorry for the leading you down that path. A better approach would be to use the Mega Menu feature.

With Mega Menus, you can have more control over the width. You only need to enable Mega Menu for the Dropdown menu we’re focusing on now. I.e., selective. Which is a good thing and what you want.

Please remove the custom CSS code I suggested. Then enable Mega Menu for your language dropdown. Here are the excellent how-tos from Avada.

https://theme-fusion.com/documentation/avada/header/using-the-mega-menu/

https://theme-fusion.com/documentation/avada/header/mega-menu-width/

This should work for you. And, it’s a preferred solution over custom CSS.

Good luck!

[marklchaves]

#632458

If for some reason the Mega Menu doesn’t work. Here’s the precise selector for your language (globe) submenu item.

/* Get the first submenu of the last menu item in the main menu. */
.fusion-main-menu > ul:last-child > li:last-child > ul {

    background: green; /* Highlight in green for debugging purposes. Remove when done. */
    width: 150px;

}

Please test the code and tweak for your case as needed.

Thanks!

[atanasprodanov]

#632482

Good morning,

Thank you for the prompt and detailed explanation.
Both ways worked out but the css just looks better as its style is same as the rest of the drop-down menus.
I would advise the users to start creating their websites with the mega menu option from the very beginning as it provides more setting capabilities.

[marklchaves]

#632538

Sweet. Glad you got it working. Good job! 🙂

Good luck with the site & happy coding!

[Author]

Posts