1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Drop Down Menu issues depending on resolution of Device

Discussion in 'Free Divi Community Forum' started by Will Howell, May 3, 2024.

  1. Will Howell

    Will Howell New Member

    Hi All,

    We have taken over a website for a client and knowledge of Divi is low, the issue we are facing is that the menu at the top of the page depending on the device resolution can change from one to two lines, the problem being is that some of these menus have drop downs, and when you hover over and then try to select one of the drop downs, because there is a gap below, it doesn't give you a chance to select, I have tried several fixes to this and none are working, if the device resolution is big enough that it doesn't create two lines of menu, then the drop downs work fine, even if there was a "stay open" delay for half a second would work.

    the site in question is https://albertilupton.com

    Any Suggestion please?

    Thanks in advance

    Will
     
    #1 Will Howell, May 3, 2024
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
  2. Divi Booster

    Divi Booster Divi Expert

    Try adding this CSS:

    Code:
    Log In or Sign Up to view this code.
    That should reduce the gap and make the drop-downs selectable.
     
    #2 Divi Booster, May 3, 2024
  3. Will Howell

    Will Howell New Member

    Thanks for this, could you advise where I need to put this CSS when it is the menu

    Have gone into the menu section, advanced and CSS - pasted it there, also pasted it into the row - Divi CSS is brand new to me
     
    #3 Will Howell, May 3, 2024
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring unique comment design on single blog post page:View Demo
  4. Divi Booster

    Divi Booster Divi Expert

    Hey Will, put the CSS in:

    WP Dashboard > Divi > Theme Options > General > Custom CSS

    This is generally the easiest way to add CSS to the site, and CSS added there will apply on all posts / pages.

    It should, I think, also work if add CSS in the "Menu Settings > Advanced > Custom CSS > Free-form CSS > CSS", but it sounds like it may not have been working for you? There are a few considerations when adding CSS in the menu settings, so I'd use the first method to keep things simple while you're learning Divi.
     
    #4 Divi Booster, May 4, 2024
  5. Will Howell

    Will Howell New Member

    You are a star, thankyou so much that has worked.
     
    #5 Will Howell, May 14, 2024
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  6. Divi Booster

    Divi Booster Divi Expert

    Great! I'm glad that helped, Will :)
     
    #6 Divi Booster, May 14, 2024
(You must log in or sign up to post here.)