Mega Menu Mobile Scroll

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.5.7] - 2026-01-21
+
+### Fixed
+**Mega Menu Mobile Responsiveness:**
+- Fixed horizontal overflow on mobile using proper full-width positioning (left: 0, right: 0, width: 100%)
+- Added box-sizing: border-box to ensure padding is included in width calculation
+- Fixed close button positioning on mobile devices - now properly anchored at top-right corner
+- Added overflow-y scrolling for mega menu panels on mobile to prevent content cutoff
+- Improved z-index layering to ensure close button remains accessible above panel content
+- Removed horizontal padding from services showcase pattern to prevent overflow",
+
 ## [2.5.6] - 2026-01-21
 
 ### Fixed

blocks/mega-menu/src/style.scss

@@ -543,13 +543,23 @@ body.mega-menu-overlay-open {
 			position: fixed !important;
 			top: 0 !important;
 			left: 0 !important;
-			right: auto !important;
-			width: 100vw !important;
+			right: 0 !important;
+			width: 100% !important;
 			height: 100vh !important;
 			max-width: none !important;
 			border-radius: 0 !important;
 			padding: 60px 20px 20px !important;
 			transform: none !important;
+			overflow-y: auto !important; // Enable vertical scrolling for long content
+			box-sizing: border-box !important; // Ensure padding is included in width calculation
+		}
+
+		// Keep close button visible at all times on mobile
+		.menu-container__close-button {
+			position: fixed !important; // Fixed positioning keeps button visible while scrolling
+			top: 20px !important;
+			right: 20px !important;
+			z-index: 101 !important; // Ensure button stays above scrolling content
 		}
 	}
 

elayne-blocks.php

@@ -3,7 +3,7 @@
  * Plugin Name: Elayne Blocks
  * Plugin URI: https://github.com/imagewize/elayne-blocks
  * Description: Custom blocks for the Elayne WordPress theme including Mega Menu, Carousel, and Slide blocks
- * Version: 2.5.6
+ * Version:2.5.7
  * Requires at least: 6.7
  * Requires PHP: 7.3
  * Author: Jasper Frumau
@@ -23,7 +23,7 @@
 	die;
 }
 
-define( 'ELAYNE_BLOCKS_VERSION', '2.5.6' );
+define( 'ELAYNE_BLOCKS_VERSION', '2.5.7' );
 define( 'ELAYNE_BLOCKS_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
 define( 'ELAYNE_BLOCKS_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
 

patterns/mega-menu-services-showcase.php

@@ -8,8 +8,8 @@
  * Inserter: true
  */
 ?>
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"},"blockGap":"var:preset|spacing|medium"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"19rem"}} -->
-<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"constrained"}} -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"0","right":"0"},"blockGap":"var:preset|spacing|medium"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"19rem"}} -->
+<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--medium);padding-right:0;padding-bottom:var(--wp--preset--spacing--medium);padding-left:0"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|large","bottom":"var:preset|spacing|large","left":"var:preset|spacing|large","right":"var:preset|spacing|large"},"blockGap":"var:preset|spacing|medium"},"border":{"radius":"12px"},"dimensions":{"minHeight":"240px"}},"backgroundColor":"primary","textColor":"base","layout":{"type":"constrained","justifyContent":"left"}} -->
 <div class="wp-block-group has-base-color has-primary-background-color has-text-color has-background" style="border-radius:12px;min-height:240px;padding-top:var(--wp--preset--spacing--large);padding-right:var(--wp--preset--spacing--large);padding-bottom:var(--wp--preset--spacing--large);padding-left:var(--wp--preset--spacing--large)"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","justifyContent":"space-between","verticalAlignment":"top"}} -->
 <div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"typography":{"fontWeight":"600"}},"textColor":"base","fontSize":"medium"} -->

readme.txt

@@ -4,7 +4,7 @@ Tags: blocks, gutenberg, carousel, mega-menu, slider
 Requires at least: 6.7
 Tested up to: 6.9
 Requires PHP: 7.3
-Stable tag: 2.5.6
+Stable tag: 2.5.7
 License: GPL v3 or later
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
@@ -125,6 +125,12 @@ It's WordPress's official frontend reactivity system. The mega menu block uses i
 
 == Changelog ==
 
+= 2.5.7 =
+* Fixed: Mega menu horizontal overflow on mobile with proper full-width positioning
+* Fixed: Mega menu close button positioning and scrolling on mobile devices
+* Fixed: Services showcase pattern horizontal padding removed to prevent overflow"
+
+
 = 2.5.6 =
 * Fixed: Mega Menu overlay close button positioning - moved to bottom-right corner for better mobile UX
 * Technical: Code formatting improvements in render.php"