From 4ea153bd93e11520ae9c499f34be13870e76c7be Mon Sep 17 00:00:00 2001
From: Jasper Frumau <jasper@imagewize.com>
Date: Fri, 19 Jun 2026 10:42:12 +0700
Subject: [PATCH 1/3] Update Documentation for Mega Menu Feature

---
 CHANGELOG.md | 30 ++++++++++++++++++++++++++++++
 readme.txt   | 11 ++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d361b26..1c07971 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,36 @@ All notable changes to the Nynaeve theme will be documented in this file.
 
 For project-wide changes (infrastructure, tooling, cross-cutting concerns), see the [project root CHANGELOG.md](../../../../../CHANGELOG.md).
 
+## [2.15.0] - 2026-06-19
+
+### Added
+
+**Services Mega Menu:**
+- Full-width desktop mega menu panel for the Services navigation item, activated by the `mega-menu` CSS class on any top-level menu item
+- Four-column grid layout: three service-category columns with icon-enhanced links plus a featured CTA card
+- Column dividers and group headings with accent bars styled in the Imagewize primary blue
+- Hover bridge element ensuring the menu stays open while the cursor moves from the nav bar to the panel
+- Featured CTA card with gradient background promoting Roots Stack quotes, linking to Contact and Services pages
+- Mobile fallback reusing the existing checkbox accordion, so mobile navigation is unchanged
+
+**Blade Components:**
+- New `<x-mega-menu>` component rendering the desktop grid panel and mobile accordion from WordPress menu data
+- New `<x-mega-icon>` component mapping per-item `icon-*` CSS classes to inline SVGs (10 icons: code, blocks, stack, support, cart, check, seo, speed, shield, server)
+
+### Changed
+
+**Navigation Markup:**
+- Added `lg:relative` to the `<nav>` element so the mega menu panel anchors to the full header width instead of the narrow menu item
+- Menu item labels now render with unescaped Blade output (`{!! !!}`) to support HTML entities in WordPress menu labels
+- Top-level items with the `mega-menu` class use the new `<x-mega-menu>` component instead of the standard dropdown
+
+### Technical
+
+**CSS Architecture:**
+- ~200 lines of desktop-only mega menu styles scoped inside `@media (min-width: 1024px)`, placed in section 3.4 of app.css
+- Reuses existing `.submenu-list` reveal mechanics (opacity + pointer-events) from the base navigation styles
+- Button and link color rules scoped under `#menu` to override inherited anchor styles",
+
 ## [2.14.2] - 2026-06-15
 
 ### Changed - Build tooling major version upgrades
diff --git a/readme.txt b/readme.txt
index a89a44b..944a00b 100644
--- a/readme.txt
+++ b/readme.txt
@@ -3,7 +3,7 @@ Contributors: jasperfrumau
 Requires at least: 6.6
 Tested up to: 6.9
 Requires PHP: 8.3
-Stable tag: 2.14.2
+Stable tag: 2.15.0
 License: MIT License
 License URI: https://opensource.org/licenses/MIT
 
@@ -13,6 +13,15 @@ Nynaeve is the Imagewize.com production theme built on Sage 11 (Roots.io stack)
 
 == Changelog ==
 
+= 2.15.0 - 06/19/26 =
+* ADDED: Services mega menu — full-width desktop dropdown with icon-enhanced service links in a four-column grid layout and a featured CTA card.
+* ADDED: Blade components `<x-mega-menu>` and `<x-mega-icon>` for mega menu rendering and SVG icon mapping (10 service icons).
+* ADDED: Hover bridge on mega menu panel preventing accidental close when moving cursor from nav bar to dropdown.
+* CHANGED: Nav element receives `lg:relative` positioning to anchor mega menu panels to full header width.
+* CHANGED: Menu item labels use unescaped Blade output to support HTML entities in WordPress menu labels.
+* CHANGED: Top-level items with `mega-menu` CSS class now route to the mega menu component instead of the standard dropdown."
+
+
 = 2.14.2 - 06/15/26 =
 * CHANGED: Vite 8 upgrade - Migrated theme build pipeline from Vite 7 to Vite 8, switching from Rollup to the Rust-based Rolldown bundler for faster builds.
 * CHANGED: Upgraded @roots/vite-plugin (v1.3.1 to v2.2.0) and laravel-vite-plugin (v2 to v3) for Vite 8 compatibility.

From dc70cc692def79962d2427c26560e33589f1183c Mon Sep 17 00:00:00 2001
From: Jasper Frumau <jasper@imagewize.com>
Date: Fri, 19 Jun 2026 10:42:18 +0700
Subject: [PATCH 2/3] Update Styles for Mega Menu

---
 resources/css/app.css | 199 ++++++++++++++++++++++++++++++++++++++++++
 style.css             |   2 +-
 2 files changed, 200 insertions(+), 1 deletion(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 9652dea..7bea75e 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -332,6 +332,205 @@ footer a {
   }
 }
 
+/* -----------------------------------------------------------------------------
+ * 3.4. Mega Menu (Services)
+ * -----------------------------------------------------------------------------
+ * Desktop-only full-width panel for the top-level item flagged `mega-menu`.
+ * Mobile (<lg) reuses the standard checkbox accordion — see section 12 — so
+ * nothing here applies below 1024px. Colours mirror the prototype at
+ * designs/nynaeve/mega-menu/services-mega-menu.html and theme.json.
+ * -------------------------------------------------------------------------- */
+@media (min-width: 1024px) {
+  /* Anchor the panel to the full-width <nav> (which is lg:relative) instead of
+     the narrow menu item, so left/right:0 spans the header. */
+  #menu .my-menu-item.mega-menu {
+    position: static;
+  }
+
+  /* Full-bleed panel. Reuses .submenu-list reveal (opacity + pointer-events)
+     from section 12; here we only re-style the surface and size. */
+  .submenu-list.mega-menu-panel {
+    left: 0;
+    right: 0;
+    width: 100%;
+    min-width: 0;
+    margin-top: 0;
+    border-radius: 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    background: linear-gradient(180deg, #1d2330 0%, #161b25 100%);
+    box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.55);
+  }
+
+  /* Hover bridge: the mega-menu li is position:static so the generic
+     .group.relative::after bridge (section 3.3) doesn't cover it.
+     This ::before extends upward from the panel into the gap, keeping
+     .group:hover active while the pointer travels down. */
+  .submenu-list.mega-menu-panel::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 100%;
+    height: 2.5rem;
+  }
+
+  .mega-menu-panel .mega-inner {
+    max-width: 72rem; /* matches max-w-6xl container */
+    margin: 0 auto;
+    padding: 2.125rem 2rem 2.375rem;
+  }
+
+  /* 3 menu columns + featured card. Group order is positional (see component):
+     1 -> col1, 2 -> col2/row1, 3 (Growth) -> col2/row2, 4 -> col3, feature -> col4. */
+  .mega-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1.05fr;
+    gap: 0.875rem;
+  }
+  .mega-grid > .mega-group:nth-child(1) { grid-column: 1; grid-row: 1; }
+  .mega-grid > .mega-group:nth-child(2) { grid-column: 2; grid-row: 1; }
+  .mega-grid > .mega-group:nth-child(3) { grid-column: 2; grid-row: 2; margin-top: 1.625rem; }
+  .mega-grid > .mega-group:nth-child(4) { grid-column: 3; grid-row: 1; }
+  .mega-grid > .mega-feature { grid-column: 4; grid-row: 1 / span 2; }
+
+  .mega-group { padding: 0.25rem 0.625rem; }
+  /* Column dividers between the three menu columns. */
+  .mega-grid > .mega-group:nth-child(2),
+  .mega-grid > .mega-group:nth-child(4) {
+    border-left: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .mega-heading {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.875rem;
+    font-family: var(--font-montserrat, 'Montserrat', sans-serif);
+    font-size: 0.6875rem;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #017cb6; /* primary */
+  }
+  .mega-heading .bar {
+    width: 1.125rem;
+    height: 2px;
+    border-radius: 2px;
+    background: #017cb6;
+  }
+
+  .mega-list { list-style: none; margin: 0; padding: 0; }
+  .mega-list li + li { margin-top: 2px; }
+
+  .mega-link {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.6875rem;
+    padding: 0.5625rem 0.625rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    transition: background 0.15s ease;
+  }
+  .mega-link:hover { background: rgba(255, 255, 255, 0.05); }
+
+  .mega-link .ic {
+    flex: 0 0 auto;
+    display: grid;
+    place-items: center;
+    width: 2.125rem;
+    height: 2.125rem;
+    border-radius: 0.5rem;
+    background: rgba(1, 124, 182, 0.12);
+    color: #017cb6;
+    transition: background 0.15s ease, color 0.15s ease;
+  }
+  .mega-link:hover .ic { background: #017cb6; color: #ffffff; }
+  .mega-link .ic svg { width: 1.125rem; height: 1.125rem; }
+
+  .mega-link .txt { display: flex; flex-direction: column; }
+  #menu .mega-link .name {
+    color: #eef1f5;
+    font-size: 0.875rem;
+    font-weight: 700;
+    line-height: 1.3;
+    text-transform: none;
+  }
+  #menu .mega-link:hover .name { color: #ffffff; }
+  .mega-link .desc {
+    margin-top: 2px;
+    color: #8b93a3;
+    font-size: 0.75rem;
+    line-height: 1.45;
+  }
+
+  /* ---- Featured / CTA column ---- */
+  .mega-feature {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 1.5rem 1.375rem;
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    border-radius: 0.875rem;
+    background:
+      radial-gradient(ellipse at top right, rgba(1, 124, 182, 0.35) 0%, transparent 60%),
+      linear-gradient(160deg, #0d2438 0%, #102b44 50%, #026492 100%);
+  }
+  .mega-feature .eyebrow {
+    margin-bottom: 0.625rem;
+    font-family: var(--font-montserrat, 'Montserrat', sans-serif);
+    font-size: 0.6875rem;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #7fd0f3;
+  }
+  .mega-feature h3 {
+    margin-bottom: 0.625rem;
+    font-family: var(--font-montserrat, 'Montserrat', sans-serif);
+    color: #ffffff;
+    font-size: 1.25rem;
+    font-weight: 800;
+    line-height: 1.25;
+  }
+  .mega-feature p {
+    margin-bottom: 1.25rem;
+    color: #cfe1ef;
+    font-size: 0.8125rem;
+    line-height: 1.6;
+  }
+  .mega-cta-row {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+  }
+  .mega-feature .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.125rem;
+    border-radius: 0.5rem;
+    font-size: 0.8125rem;
+    font-weight: 700;
+    text-transform: none;
+    text-decoration: none;
+    transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
+  }
+  #menu .mega-feature .btn-primary {
+    background: #017cb6;
+    color: #ffffff;
+    box-shadow: 0 8px 20px -6px rgba(1, 124, 182, 0.7);
+  }
+  #menu .mega-feature .btn-primary:hover { background: #028fd1; color: #ffffff; transform: translateY(-1px); }
+  #menu .mega-feature .btn-ghost {
+    background: rgba(255, 255, 255, 0.08);
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+  }
+  #menu .mega-feature .btn-ghost:hover { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
+}
+
 /* -----------------------------------------------------------------------------
  * 4. Code & Block Styling
  * -------------------------------------------------------------------------- */
diff --git a/style.css b/style.css
index b427941..7896302 100644
--- a/style.css
+++ b/style.css
@@ -2,7 +2,7 @@
 Theme Name: Nynaeve
 Theme URI: https://imagewize.com
 Description: Modern WordPress theme built on Sage 11 with reusable custom blocks using WordPress native tools and the Roots.io stack.
-Version: 2.14.2
+Version: 2.15.0
 Author: Jasper Frumau
 Author URI: https://magewize.com
 Text Domain: nynaeve

From 032388067bc46453bc2c4b10b6e73c1851cd296b Mon Sep 17 00:00:00 2001
From: Jasper Frumau <jasper@imagewize.com>
Date: Fri, 19 Jun 2026 10:42:22 +0700
Subject: [PATCH 3/3] Add Mega Menu Component Files

---
 .../views/components/mega-icon.blade.php      | 45 ++++++++++
 .../views/components/mega-menu.blade.php      | 82 +++++++++++++++++++
 .../views/components/menu-item.blade.php      | 38 +++++----
 .../views/components/navigation.blade.php     |  2 +-
 4 files changed, 150 insertions(+), 17 deletions(-)
 create mode 100644 resources/views/components/mega-icon.blade.php
 create mode 100644 resources/views/components/mega-menu.blade.php

diff --git a/resources/views/components/mega-icon.blade.php b/resources/views/components/mega-icon.blade.php
new file mode 100644
index 0000000..6569695
--- /dev/null
+++ b/resources/views/components/mega-icon.blade.php
@@ -0,0 +1,45 @@
+@props(['classes' => ''])
+
+{{--
+  Maps a per-item `icon-*` CSS class (set on the menu item in nav-menus.php)
+  to an inline SVG. Graceful no-match: no icon class -> nothing rendered.
+  Icon set mirrors designs/nynaeve/mega-menu/services-mega-menu.html.
+--}}
+
+@php
+    preg_match('/icon-[a-z]+/', $classes ?? '', $matches);
+    $icon = $matches[0] ?? null;
+@endphp
+
+@switch($icon)
+    @case('icon-code')
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+        @break
+    @case('icon-blocks')
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
+        @break
+    @case('icon-stack')
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v20M2 7l10 5 10-5M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+        @break
+    @case('icon-support')
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+        @break
+    @case('icon-cart')
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
+        @break
+    @case('icon-check')
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
+        @break
+    @case('icon-seo')
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 6l-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/></svg>
+        @break
+    @case('icon-speed')
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+        @break
+    @case('icon-shield')
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+        @break
+    @case('icon-server')
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 10h.01M6 10h.01"/><rect x="2" y="4" width="20" height="8" rx="2"/><path d="M6 16h12a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v0a2 2 0 0 1 2-2z"/></svg>
+        @break
+@endswitch
diff --git a/resources/views/components/mega-menu.blade.php b/resources/views/components/mega-menu.blade.php
new file mode 100644
index 0000000..553ce54
--- /dev/null
+++ b/resources/views/components/mega-menu.blade.php
@@ -0,0 +1,82 @@
+@props(['item'])
+
+{{--
+  Mega menu: an alternate renderer for ONE flagged top-level menu item
+  (CSS class `mega-menu`). All link data still lives in the WordPress menu and
+  is edited in nav-menus.php — this only changes how it is displayed.
+
+  Root reuses `.submenu-list` so the existing CSS does the work for free:
+    - mobile (<lg): the parent checkbox accordion expands this panel
+    - desktop (lg+): `.group:hover > .submenu-list` reveals it + the hover bridge
+
+  Two renderings of the same `$item->children`:
+    - Desktop grid (`.mega-grid`, hidden on mobile): labelled columns with icons,
+      descriptions and a hardcoded featured CTA card (column 4).
+    - Mobile accordion (`lg:hidden`): recurses <x-menu-item> so group headers
+      become the same collapsible rows used everywhere else — one behaviour,
+      no forked accordion logic.
+
+  Column layout (see app.css "3.4 Mega Menu") mirrors the prototype and assumes
+  the documented group order: Build & Develop · WooCommerce · Growth ·
+  Performance & Security (Growth stacks under WooCommerce in column 2).
+--}}
+
+@php($groups = is_array($item->children) ? $item->children : [])
+
+<ul class="submenu-list mega-menu-panel
+    grid grid-rows-[0fr] lg:block!
+    transition-[grid-template-rows] lg:transition-none duration-500 ease-in-out
+    text-sm text-white"
+    role="menu"
+    aria-label="{{ $item->label }} submenu">
+    <div class="overflow-hidden lg:overflow-visible">
+
+        {{-- ===== Desktop grid panel ===== --}}
+        <div class="mega-inner hidden lg:block">
+            <div class="mega-grid">
+                @foreach ($groups as $group)
+                    <div class="mega-group">
+                        <p class="mega-heading"><span class="bar"></span>{!! $group->label !!}</p>
+                        @if (is_array($group->children) && count($group->children))
+                            <ul class="mega-list">
+                                @foreach ($group->children as $link)
+                                    <li>
+                                        <a href="{{ $link->url }}" class="mega-link" role="menuitem"
+                                           @if ($link->target) target="{{ $link->target }}" @endif>
+                                            <span class="ic"><x-mega-icon :classes="$link->classes ?? ''" /></span>
+                                            <span class="txt">
+                                                <span class="name">{!! $link->label !!}</span>
+                                                @if (!empty($link->description))
+                                                    <span class="desc">{!! $link->description !!}</span>
+                                                @endif
+                                            </span>
+                                        </a>
+                                    </li>
+                                @endforeach
+                            </ul>
+                        @endif
+                    </div>
+                @endforeach
+
+                {{-- Featured CTA card — hardcoded by design (a WP menu can't hold rich card copy). --}}
+                <div class="mega-feature">
+                    <p class="eyebrow">Not sure where to start?</p>
+                    <h3>Built on the Roots Stack</h3>
+                    <p>Tell us about your project and get a tailored quote for a Trellis / Bedrock setup — no commitment required.</p>
+                    <div class="mega-cta-row">
+                        <a href="{{ home_url('/contact/') }}" class="btn btn-primary">Get a Roots Stack Quote</a>
+                        <a href="{{ home_url('/services/roots-stack-development/') }}" class="btn btn-ghost">View Pricing</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {{-- ===== Mobile accordion (reuses the standard nested menu) ===== --}}
+        <div class="lg:hidden">
+            @foreach ($groups as $group)
+                <x-menu-item :item="$group" :level="1" />
+            @endforeach
+        </div>
+
+    </div>
+</ul>
diff --git a/resources/views/components/menu-item.blade.php b/resources/views/components/menu-item.blade.php
index c575ac2..74bed84 100644
--- a/resources/views/components/menu-item.blade.php
+++ b/resources/views/components/menu-item.blade.php
@@ -5,6 +5,7 @@
     $isTopLevel = $level === 0;
     $isSecondLevel = $level === 1;
     $children = $hasChildren ? $item->children : [];
+    $isMega = $isTopLevel && str_contains($item->classes ?? '', 'mega-menu');
 @endphp
 
 <li class="group my-menu-item relative
@@ -37,7 +38,7 @@ class="inline-block no-underline uppercase whitespace-nowrap
            {{ $level === 1 ? 'hover:text-primary' : '' }}
            {{ $level === 2 ? 'hover:text-primary-dark' : '' }}
            {{ $level >= 3 ? 'hover:text-main' : '' }}">
-            {{ $item->label }}
+            {!! $item->label !!}
         </a>
 
         @if ($hasChildren)
@@ -57,20 +58,25 @@ class="submenu-chevron cursor-pointer p-1 lg:pointer-events-none"
     </div>
 
     @if ($hasChildren)
-        <!-- Child menu items start -->
-        <ul class="submenu-list
-        grid grid-rows-[0fr] lg:block!
-        transition-[grid-template-rows] lg:transition-none duration-500 ease-in-out
-        text-sm text-white
-        lg:absolute lg:min-w-50 lg:bg-dropdown-bg lg:shadow-lg lg:rounded-sm"
-            role="menu"
-            aria-label="{{ $item->label }} submenu">
-            <div class="overflow-hidden lg:overflow-visible">
-                @foreach ($children as $child)
-                    <x-menu-item :item="$child" :level="$level + 1" />
-                @endforeach
-            </div>
-        </ul>
-        <!-- Child menu items end -->
+        @if ($isMega)
+            <!-- Mega menu: alternate renderer for the flagged top-level item -->
+            <x-mega-menu :item="$item" />
+        @else
+            <!-- Child menu items start -->
+            <ul class="submenu-list
+            grid grid-rows-[0fr] lg:block!
+            transition-[grid-template-rows] lg:transition-none duration-500 ease-in-out
+            text-sm text-white
+            lg:absolute lg:min-w-50 lg:bg-dropdown-bg lg:shadow-lg lg:rounded-sm"
+                role="menu"
+                aria-label="{{ $item->label }} submenu">
+                <div class="overflow-hidden lg:overflow-visible">
+                    @foreach ($children as $child)
+                        <x-menu-item :item="$child" :level="$level + 1" />
+                    @endforeach
+                </div>
+            </ul>
+            <!-- Child menu items end -->
+        @endif
     @endif
 </li>
\ No newline at end of file
diff --git a/resources/views/components/navigation.blade.php b/resources/views/components/navigation.blade.php
index 0f6affd..d33ddf8 100644
--- a/resources/views/components/navigation.blade.php
+++ b/resources/views/components/navigation.blade.php
@@ -1,6 +1,6 @@
 @php($menu = Navi::build($name))  
 @if ($menu->isNotEmpty())
-<nav class="w-full z-30 top-0 py-1" role="navigation" aria-label="Main navigation">
+<nav class="w-full z-30 top-0 py-1 lg:relative" role="navigation" aria-label="Main navigation">
     <div class="w-full container mx-auto max-w-6xl flex flex-wrap items-center justify-between mt-0 px-8 py-1">
       <!-- wrapper for logo and menu -->
       <div class="flex items-center">