1. CYBER MONDAY SALE All Access Pass @ $59 / Lifetime & 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 Mega menu with Safari

Discussion in 'Free Divi Community Forum' started by Recco, Nov 13, 2025.

  1. Recco

    Recco Member
    Pro Member (Support Expired)

    Bonjour,
    J'ai encore un problème avec mon site. Le mega menu s'affiche bien sur tous les navigateurs desktop, sauf sur Safari.
    Auriez-vous une solution ?
    Merci.
    https://mamignonne.fr
     

    Attached Files:

    #1 Recco, Nov 13, 2025
    1. PRO MEMBER PERKS Divi Block Pro - Premade card carousel design for your Divi site without using any plugins:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    For this previous CSS in WP Admin > Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    Try to remove it & replace it with the below & see if it works:
    Code:
    Log In or Sign Up to view this code.
     
    #2 Divi.Help, Nov 13, 2025
  3. Recco

    Recco Member
    Pro Member (Support Expired)

    It should be possible to raise the two middle columns.
     

    Attached Files:

    #3 Recco, Nov 14, 2025
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  4. Recco

    Recco Member
    Pro Member (Support Expired)

    It's incredible how different Safari is from other browsers!
     
    #4 Recco, Nov 14, 2025
  5. Divi.Help

    Divi.Help Administrator
    Staff Member

    Don't have a Mac to test. But you may try the below CSS instead & see if it works:
    Code:
    Log In or Sign Up to view this code.
     
    #5 Divi.Help, Nov 14, 2025
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  6. Recco

    Recco Member
    Pro Member (Support Expired)

    No that doesn't.
     

    Attached Files:

    #6 Recco, Nov 14, 2025
  7. Recco

    Recco Member
    Pro Member (Support Expired)

    When I ask to Perplexity, he give me this code, but that breack the mega menu in Chrome.

    /* Mega menu : 4 colonnes avec gap */
    .et-menu-nav li.mega-menu > ul {
    column-count: 4;
    column-gap: 2rem;
    max-width: 1200px; /* adapte à la largeur de ton site */
    margin: 0 auto;
    white-space: normal;
    background: #F2F6EF; /* couleur de fond personnalisable */
    padding: 40px 60px; /* ajuste selon besoin */
    box-sizing: border-box;
    }
    /* Les blocs d'items (li) : pas de width/display forcé */
    .et-menu-nav li.mega-menu > ul > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 60px;
    /* PAS DE width/display ICI ! */
    }
    /* Option : Séparer les titres de colonnes (h4, strong, etc.) */
    .et-menu-nav li.mega-menu > ul > li > *:first-child {
    font-weight: bold;
    font-size: 1.15em;
    margin-bottom: 8px;
    }
    /* Correction responsive si besoin */
    @Media (max-width: 900px) {
    .et-menu-nav li.mega-menu > ul {
    column-count: 2;
    padding: 30px 20px;
    }
    }
    @Media (max-width: 600px) {
    .et-menu-nav li.mega-menu > ul {
    column-count: 1;
    padding: 15px 8px;
    }
    }
     
    #7 Recco, Nov 14, 2025
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    Does that work with Safari? If yes, then just apply those CSS that fixes the Chrome issue.

    Remove padding & max-width for .et-menu-nav li.mega-menu > ul:

    .et-menu-nav li.mega-menu > ul {
    column-count: 4;
    column-gap: 2rem;
    margin: 0 auto;
    white-space: normal;
    background: #F2F6EF; /* couleur de fond personnalisable */
    box-sizing: border-box;
    }
     
    #8 Divi.Help, Nov 14, 2025
  9. Recco

    Recco Member
    Pro Member (Support Expired)

    No, that doesn't
     
    #9 Recco, Nov 14, 2025
    1. PRO MEMBER PERKS Divi.Help One-Page Layouts - Beautifully crafted one-page Divi layouts just for you:View All Layouts
  10. Divi.Help

    Divi.Help Administrator
    Staff Member

    #10 Divi.Help, Nov 14, 2025
  11. Recco

    Recco Member
    Pro Member (Support Expired)

    I let this code :

    .et-menu-nav li.mega-menu > ul > li {

    overflow: hidden;

    break-inside: avoid-column;

    page-break-inside: avoid;

    -webkit-column-break-inside: avoid;

    display: block !important;

    width: 100% !important;

    margin-bottom: 100px;

    }


    .et-menu-nav li.mega-menu > ul {

    column-count: 4;

    column-gap: 2rem;

    }

    with 100px on margin-bottom.
    On the home page, it looks like this (accueil1.png), and the "Applique" item is not clickable.
    When I go to another page, it looks like this: accessoire.png
     

    Attached Files:

    #11 Recco, Nov 14, 2025
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  12. Recco

    Recco Member
    Pro Member (Support Expired)

    All right. Thank you for your assistance.
     
    #12 Recco, Nov 14, 2025
(You must log in or sign up to post here.)