1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, 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 Menu Breakpoint

Discussion in 'Free Divi Community Forum' started by Stuart Gould, Jul 10, 2025.

  1. Stuart Gould

    Stuart Gould New Member

    I have tried lots of CSS I could find from googling and on this forum and nothing seems to change the break point of my mobile menu on this site. https://sportsortho.co.uk/

    At about 1132px, the menu starts to go onto two lines and then the mobile menu only appears about 980px. Whatever CSS I have tried doesn't change anything, so I think they have all been targeting the wrong element. My issue is I have no idea what it should be targeting and I can't get anything to work.

    Can anyone help me so I can get the mobile menu to display much earlier to stop the menu going to two lines , something like 1200px?
     
    #1 Stuart Gould, Jul 10, 2025
    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  2. Divi Booster

    Divi Booster Divi Expert

    Hey Stuart,

    I think you could do it with this CSS:

    Code:
    Log In or Sign Up to view this code.
    Add it into "WP Admin > Divi > Theme Options > General > Custom CSS".

    It's a modified form of the code in this post: https://divibooster.com/show-divi-header-menu-button-on-large-screens/. I've added a max-width on the main media query, so that it applies only up to a certain point - I set this to 1330px as below that your search icon slips down to the line below, but if you do want the breakpoint to be 1200px, change this value. I also adjusted the margins and drop-down menu max-width and background color to better suit your site.

    I hope that helps, but let me know if anything doesn't look the way you want it to.
     
    #2 Divi Booster, Jul 10, 2025
    Stuart Gould likes this.
  3. Stuart Gould

    Stuart Gould New Member

    Absolute legend! That works perfectly. The closest I got to that was having it switch but it lost all the styling and the dropdown became thin and unusable. Your solution works perfectly. So grateful - thank you very much!
     
    #3 Stuart Gould, Jul 10, 2025
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom header designs for you to choose from:View Demo
  4. Divi Booster

    Divi Booster Divi Expert

    You're very welcome, Stuart! Yeah, I ended up with the thin dropdown at one point - I was trying to move the icon up a bit using a translateX transform. But I think that was cancelling out another translate on the menu and causing the thin dropdown issue. Adjusting the icon position using a negative margin instead avoided this :)

    Anyway, I'm glad that does what you need! Just give me a shout if there's anything else you'd like some help with.

    All the best with the site!

    Dan
     
    #4 Divi Booster, Jul 10, 2025
    Stuart Gould likes this.
  5. Stuart Gould

    Stuart Gould New Member

    Thanks Dan!
     
    #5 Stuart Gould, Jul 11, 2025
    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
(You must log in or sign up to post here.)