diff --git a/scss/boost_union/post.scss b/scss/boost_union/post.scss
index b3c433b6f0f..003ad8ce5ee 100644
--- a/scss/boost_union/post.scss
+++ b/scss/boost_union/post.scss
@@ -1566,8 +1566,21 @@ body.theme_boost-union-footerbuttonnone.jsenabled {
             }
             /* The icon tag aligned top at the usermenu link */
             .usermenu .dropdown-menu {
-                .submenu .items a.dropdown-item {
-                    align-items: baseline;
+                .submenu {
+                    /* Remove the padding on the User submenu header */
+                    .header {
+                        padding: 0;
+                        /* Centered align the User submenu header, added padding and removed the underline for the link */
+                        .carousel-navigation-link {
+                            text-decoration: none;
+                            padding: .1rem .75rem;
+                            display: flex;
+                            align-items: center;
+                        }
+                    }
+                    .items a.dropdown-item {
+                        align-items: baseline;
+                    }
                 }
                 /* Usermenu dropdown item position relative for it's submenu */
                 .dropdown-item {
@@ -1579,7 +1592,7 @@ body.theme_boost-union-footerbuttonnone.jsenabled {
                 }
             }
             /* Dropdown more menu back button arrow margin */
-            .boost-union-moremenu.dropdown-menu button.carousel-navigation-link > * {
+            .boost-union-moremenu.dropdown-menu .carousel-navigation-link > * {
                 pointer-events: none;
                 img {
                     margin: 0;
@@ -1590,6 +1603,7 @@ body.theme_boost-union-footerbuttonnone.jsenabled {
             .more-nav li.nav-item {
                 /* Menu link icon aligned center */
                 a {
+                    display: flex;
                     align-items: center;
                     label {
                         margin-bottom: 0;
@@ -2079,13 +2093,12 @@ body.theme_boost-union-footerbuttonnone.jsenabled {
             /* Added the arrow icon styles for the dropdown sub menu header */
             .submenu .header {
                 font-size: .975rem;
-                padding: 0.25rem 0.75rem;
                 display: flex;
                 align-items: center;
             }
         }
         /* Removed the margin for the carousel back button arrow */
-        &.fixed-bottom .boost-union-moremenu.dropdown-menu button.carousel-navigation-link > * {
+        &.fixed-bottom .boost-union-moremenu.dropdown-menu .carousel-navigation-link > * {
             pointer-events: none;
             img {
                 margin: 0;
@@ -2109,13 +2122,22 @@ body.theme_boost-union-footerbuttonnone.jsenabled {
         .moremenu-carousel-item-header {
             display: none;
         }
-        button.carousel-navigation-link > * {
+        .carousel-navigation-link > * {
             pointer-events: none;
             /* Drop down more menu carousel item header image */
             img {
                 margin: 0;
             }
         }
+        /* Make the carousel navigation link to full width and cursor as pointor */
+        .carousel-navigation-link {
+            width: 100%;
+            cursor: pointer;
+            /* Removed the underline on hovering the link */
+            &:hover {
+                text-decoration: none;
+            }
+        }
     }
     /* Dropdown carousel more menu*/
     .dropdownmoremenu {
diff --git a/templates/core/user_menu.mustache b/templates/core/user_menu.mustache
index 779fad3787f..d6525157c33 100644
--- a/templates/core/user_menu.mustache
+++ b/templates/core/user_menu.mustache
@@ -60,6 +60,7 @@
     * Include submenus custom return id, helps to get back to the submenus parent from third level child.
     * Add icon support to items.
     * Add user full name at the top of the user menu.
+    * Make submenu headers fully clickable.
 }}
 <div class="usermenu">
     {{#unauthenticateduser}}
@@ -97,6 +98,21 @@
                         {{#submenus}}
                             <div id="carousel-item-{{id}}" role="menu" class="carousel-item submenu" tabindex="-1" aria-label="{{title}}">
                                 <div class="d-flex flex-column h-100">
+
+                                    {{#includesmartmenu}}
+                                    <!-- Make submenu headers fully clickable. -->
+                                    <div class="header">
+                                        <a href="#" class="carousel-navigation-link" data-carousel-target-id="carousel-item-{{#returnid}}{{returnid}}{{/returnid}}{{^returnid}}main{{/returnid}}"
+                                            aria-label="{{#str}}usermenugoback{{/str}}">
+                                            <button type="button" class="btn btn-icon  text-decoration-none text-body">
+                                                <span class="dir-rtl-hide">{{#pix}}i/arrow-left{{/pix}}</span>
+                                                <span class="dir-ltr-hide">{{#pix}}i/arrow-right{{/pix}}</span>
+                                            </button>
+                                            <span class="pl-2" id="carousel-item-title-{{id}}">{{#text}}{{{text}}}{{/text}}{{^text}}{{title}}{{/text}}</span>
+                                        </a>
+                                    </div>
+                                    {{/includesmartmenu}}
+                                    {{^includesmartmenu}}
                                     <div class="header">
                                         <button type="button" class="btn btn-icon carousel-navigation-link text-decoration-none text-body" data-carousel-target-id="carousel-item-{{#returnid}}{{returnid}}{{/returnid}}{{^returnid}}main{{/returnid}}" aria-label="{{#str}}usermenugoback{{/str}}">
                                             <span class="dir-rtl-hide">{{#pix}}i/arrow-left{{/pix}}</span>
@@ -104,6 +120,8 @@
                                         </button>
                                         <span class="pl-2" id="carousel-item-title-{{id}}">{{#text}}{{{text}}}{{/text}}{{^text}}{{title}}{{/text}}</span>
                                     </div>
+                                    {{/includesmartmenu}}
+
                                     <div class="dropdown-divider"></div>
                                     <div class="items h-100 overflow-auto" role="menu" aria-labelledby="carousel-item-title-{{id}}">
                                         {{> core/user_action_menu_submenu_items }}
diff --git a/templates/smartmenus-moremenu-children.mustache b/templates/smartmenus-moremenu-children.mustache
index 8c0f9be7609..79582b174cb 100644
--- a/templates/smartmenus-moremenu-children.mustache
+++ b/templates/smartmenus-moremenu-children.mustache
@@ -24,6 +24,7 @@
     * Added the carousel-target data to the li item.
     * Main items are wrapped with carousel-item.
     * Second-level submenus are rendered as separate carousel items.
+    * Make submenu headers fully clickable.
 
     Example context (json):
     {
@@ -90,14 +91,17 @@
                     {{/items}}
                 {{/children}}
                 {{#submenus}}
+                    <!-- Make submenu headers fully clickable. -->
                     <div id="carousel-item-{{id}}" role="menu" class="carousel-item submenu" tabindex="-1" aria-label="{{title}}">
                         <div class="d-flex flex-column h-100">
                             <div class="header">
-                                <button type="button" class="btn btn-icon carousel-navigation-link text-decoration-none text-body" data-carousel-target-id="carousel-item-{{#returnid}}{{returnid}}{{/returnid}}{{^returnid}}main{{/returnid}}" aria-label="{{#str}}usermenugoback{{/str}}">
-                                    <span class="dir-rtl-hide">{{#pix}}i/arrow-left{{/pix}}</span>
-                                    <span class="dir-ltr-hide">{{#pix}}i/arrow-right{{/pix}}</span>
-                                </button>
-                                <span class="pl-2" id="carousel-item-title-{{id}}">{{#title}}{{{title}}}{{/title}}{{^title}}{{{text}}}{{/title}}</span>
+                                <a href="#" class=" carousel-navigation-link" data-carousel-target-id="carousel-item-{{#returnid}}{{returnid}}{{/returnid}}{{^returnid}}main{{/returnid}}" aria-label="{{#str}}usermenugoback{{/str}}">
+                                    <button type="button" class="btn btn-icon text-decoration-none text-body">
+                                        <span class="dir-rtl-hide">{{#pix}}i/arrow-left{{/pix}}</span>
+                                        <span class="dir-ltr-hide">{{#pix}}i/arrow-right{{/pix}}</span>
+                                    </button>
+                                    <span class="pl-2" id="carousel-item-title-{{id}}">{{#title}}{{{title}}}{{/title}}{{^title}}{{{text}}}{{/title}}</span>
+                                </a>
                             </div>
                             <div class="dropdown-divider"></div>
                             <div class="items h-100 overflow-auto" role="menu" aria-labelledby="carousel-item-title-{{id}}">
diff --git a/tests/behat/theme_boost_union_smartmenusettings_menuitems_presentation.feature b/tests/behat/theme_boost_union_smartmenusettings_menuitems_presentation.feature
index fcf9d29c10c..0e1f7f064b2 100644
--- a/tests/behat/theme_boost_union_smartmenusettings_menuitems_presentation.feature
+++ b/tests/behat/theme_boost_union_smartmenusettings_menuitems_presentation.feature
@@ -349,3 +349,33 @@ Feature: Configuring the theme_boost_union plugin on the "Smart menus" page, app
     And ".dropdown-divider" "css_element" should exist in the ".bottom-navigation" "css_element"
     # Divider in menubar.
     And ".dropdown-divider" "css_element" should exist in the "nav.menubar" "css_element"
+
+  @javascript
+  Scenario: Smartmenu: Menus: Application - Make full submenu header clickable
+    When I log in as "admin"
+    And I set "Quick links" smart menu items with the following fields to these values:
+      | Title                            | Available courses |
+      | Menu item type                   | Dynamic courses   |
+      | Dynamic courses: Course category | Category 1        |
+      | Menu item mode                   | Submenu           |
+    And I click on "Quick links" "link" in the ".primary-navigation" "css_element"
+    And I click on "Available courses" "link" in the ".primary-navigation" "css_element"
+    And I should see "Test course1" in the ".primary-navigation" "css_element"
+    And I should see "Test course2" in the ".primary-navigation" "css_element"
+    And I should see "Available courses" in the ".primary-navigation .header .carousel-navigation-link" "css_element"
+    # Verify the full header element is clickable.
+    And I click on ".carousel-item.active .header" "css_element" in the ".primary-navigation" "css_element"
+    And I should see "Available courses" in the ".primary-navigation .carousel-item" "css_element"
+    And I should not see "Available courses" in the ".primary-navigation .header .carousel-navigation-link" "css_element"
+    And I should not see "Test course1" in the ".primary-navigation" "css_element"
+    # User menu
+    And I click on "#user-menu-toggle" "css_element"
+    And I click on "Quick links" "link" in the "#usermenu-carousel" "css_element"
+    And I click on "Available courses" "link" in the "#usermenu-carousel" "css_element"
+    And I should see "Test course1" in the "#usermenu-carousel" "css_element"
+    And I should see "Test course2" in the "#usermenu-carousel" "css_element"
+    And I should see "Available courses" in the "#usermenu-carousel .carousel-item.active .header .carousel-navigation-link" "css_element"
+    And I click on ".carousel-item.active .header" "css_element" in the "#usermenu-carousel" "css_element"
+    And I should see "Available courses" in the "#usermenu-carousel .carousel-item.active" "css_element"
+    And I should not see "Available courses" in the "#usermenu-carousel .carousel-item.active .header .carousel-navigation-link" "css_element"
+    And I should not see "Test course1" in the "#usermenu-carousel" "css_element"
diff --git a/version.php b/version.php
index 1eee1787b57..4b0835597d3 100644
--- a/version.php
+++ b/version.php
@@ -25,7 +25,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->component = 'theme_boost_union';
-$plugin->version = 2023102034;
+$plugin->version = 2023102035;
 $plugin->release = 'v4.3-r11';
 $plugin->requires = 2023100900;
 $plugin->supported = [403, 403];