/** * Divi 5 subscriber mobile header: center a menu after the existing verified * subscription controller hides the Join Free button. No cookie or menu-event * handling is added here; Divi remains responsible for opening the dropdown. * * v1.6.46: Anchor the dropdown to the full-width Menu module, NOT to Divi's * right-aligned, shrink-to-fit .mobile_nav wrapper. The latter can be offset * on actual phones even if a simplified responsive preview looks centered. * v1.6.47: Apply only in Divi's PHONE range (<=767px). At 768-980px Divi * owns tablet navigation and the phone-only row's visibility. Never override * Divi's tablet display:none!important with this centering fallback. */ @media (max-width: 767px) { /* This is activated only by the controller's real hidden-button marker. In Divi's visual editor, that marker is restored and these rules stop. */ .mobile-menu-center:has(> .et_pb_column .et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; justify-items: stretch !important; width: 100% !important; max-width: 100% !important; margin-inline: auto !important; overflow: visible !important; } .mobile-menu-center:has(> .et_pb_column .et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) > .et_pb_column:has(.et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) { display: none !important; } .mobile-menu-center:has(> .et_pb_column .et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) > .et_pb_column:has(> .et_pb_menu) { display: block !important; grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex-basis: 100% !important; margin: 0 !important; padding-inline: 0 !important; justify-self: stretch !important; overflow: visible !important; } /* The Menu module is the single positioning reference. Explicit full-width layers override Divi's per-breakpoint right-alignment and intrinsic width. */ .mobile-menu-center:has(.et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) > .et_pb_column > .et_pb_menu { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; float: none !important; overflow: visible !important; text-align: center !important; } /* The row's specific Menu module has no logo. Avoid any invisible logo wrapper reserving horizontal space beside the hamburger. */ .mobile-menu-center:has(.et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) .et_pb_menu--without-logo > .et_pb_menu_inner_container > .et_pb_menu__logo-wrap { display: none !important; } .mobile-menu-center:has(.et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) .et_pb_menu_inner_container, .mobile-menu-center:has(.et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) .et_pb_menu__wrap { position: static !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; padding-inline: 0 !important; float: none !important; overflow: visible !important; text-align: center !important; } .mobile-menu-center:has(.et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) .et_mobile_nav_menu { position: static !important; display: flex !important; flex: 0 0 auto !important; justify-content: center !important; align-items: center !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; float: none !important; overflow: visible !important; text-align: center !important; } .mobile-menu-center:has(.et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) .et_mobile_nav_menu > .mobile_nav { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; float: none !important; overflow: visible !important; text-align: center !important; } .mobile-menu-center:has(.et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) .et_mobile_nav_menu .mobile_menu_bar { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; float: none !important; margin: 0 !important; padding: 0 !important; left: auto !important; right: auto !important; transform: none !important; } /* position:static on every intermediate wrapper makes this absolute menu resolve left:50% against the FULL Menu module instead of .mobile_nav. A viewport-based width, wrapping links, and visible ancestor overflow prevent cut-off text on narrow phones. */ .mobile-menu-center:has(.et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) .et_mobile_nav_menu .et_mobile_menu { box-sizing: border-box !important; position: absolute !important; top: calc(100% + 12px) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: min(360px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; min-width: 0 !important; margin: 0 !important; padding: 8px 0 !important; overflow-x: hidden !important; overflow-y: auto !important; z-index: 100 !important; text-align: left !important; } .mobile-menu-center:has(.et_pb_button.hide-subscription[data-fase-subscription-hidden="1"]) .et_mobile_nav_menu .et_mobile_menu > li > a { box-sizing: border-box !important; display: block !important; white-space: normal !important; overflow-wrap: break-word !important; padding: 14px 20px !important; line-height: 1.5 !important; } }