1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Solved How to deal with long drop down mnu

Discussion in 'Basic Support Forum' started by Amy Hale``, Jan 15, 2019.

  1. Amy Hale``

    Amy Hale`` New Member
    Divi Ultimate Header Plugin

    4BC43980-071E-4723-A998-3FF7815C6D7C.png


    Hi, I have a very long drop down menu and have an issue that when you get to the bottom of the page there isn’t a way to get to see the whole menu. I am toying with a mega menu, or multi column menu but have not had much success making it work.

    Are there any devices that can help me make this more user friendly? Like an arrow or something that lets you scroll while inside the drop down?

    Not sure if that makes sense.
    Any help would be appreciated.
    Thanks amy
     
    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try to go to Appearance > Menus to add CSS Class free-menu-2-column for Medical Services menu item:
    Then add this CSS in Divi > Theme Options > Custom CSS:
    Code:
    @media screen and (min-width: 981px) {
        .free-menu-2-column>ul {
            width: 700px!important;
        }
        .free-menu-2-column>ul>li {
            width: 50%!important;
            float: left!important;
        }
    }
     
  3. Amy Hale``

    Amy Hale`` New Member
    Divi Ultimate Header Plugin


    Hi, thanks for getting back to me so quick. It made the column wider but didn’t make it 2 columns. Is it possible I missed something?

    thanks Amy
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade rolling text design for your Divi site without using any plugins:View Demo
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    I see that you insert this: .free-menu-2column>ul>li

    It should be .free-menu-2-column>ul>li
    **A missing dash.
     
  5. Amy Hale``

    Amy Hale`` New Member
    Divi Ultimate Header Plugin

    That did the trick. Thanks a bunch. Could you tell me how this might change if I wanted to go to 3 columns?
    And again, you guys have been great with your responsiveness to my questions.

    Amy
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade promo bar / notification bar with close button for your Divi site without using any plugins:View Demo
  6. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try this instead for 3 columns:
    Code:
    @media screen and (min-width: 981px) {
        .free-menu-2-column>ul {
            width: 900px!important;
            left: -300px!important;
        }
        .free-menu-2-column>ul>li {
            width: 33.3%!important;
            float: left!important;
        }
    }