Avada Forums Community Forum Drop Down Menu Width ?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • atanasprodanov
    Participant
    Post count: 20

    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)

    Example picture
    Link to the website

    marklchaves
    Participant
    Post count: 873

    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
    Participant
    Post count: 873

    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
    Participant
    Post count: 20

    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.
    screenshot

    atanasprodanov
    Participant
    Post count: 20

    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 :
    screen3

    .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
    Participant
    Post count: 873

    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
    Participant
    Post count: 873

    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
    Participant
    Post count: 20

    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
    Participant
    Post count: 873

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

    Good luck with the site & happy coding!

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.