From b2074d556327b777cb95d1c000cd77478984dea2 Mon Sep 17 00:00:00 2001
From: Maggie Serino <maggie.serino@10up.com>
Date: Wed, 6 Nov 2024 18:54:39 +0100
Subject: [PATCH 1/6] TMZ-74 wip header fixes

---
 .../assets/js/hello-plus-header.js            | 20 ++--
 .../assets/scss/hello-plus-header.scss        | 55 +++++++++--
 .../classes/render/widget-header-render.php   | 12 ++-
 modules/template-parts/widgets/ehp-footer.php | 12 ++-
 modules/template-parts/widgets/ehp-header.php | 92 ++++++++++---------
 5 files changed, 124 insertions(+), 67 deletions(-)

diff --git a/modules/template-parts/assets/js/hello-plus-header.js b/modules/template-parts/assets/js/hello-plus-header.js
index a3d8507a..469cd5b6 100644
--- a/modules/template-parts/assets/js/hello-plus-header.js
+++ b/modules/template-parts/assets/js/hello-plus-header.js
@@ -131,24 +131,26 @@ class elementorHelloPlusHeaderHandler {
 
 	toggleSubMenu( event ) {
 		event.preventDefault();
-		const subMenu = event.target.nextElementSibling;
-		const itemTarget = event.target;
+		const target = event.target;
+		const isSvg = target.classList.contains( 'ehp-header__submenu-toggle-icon' );
+		const targetItem = isSvg ? target.parentElement : target;
+		const subMenu = isSvg ? target.parentElement.nextElementSibling : target.nextElementSibling;
 		const ariaHidden = subMenu.getAttribute( 'aria-hidden' );
 
 		if ( 'true' === ariaHidden ) {
-			this.openSubMenu( itemTarget, subMenu );
+			this.openSubMenu( targetItem, subMenu );
 		} else {
-			this.closeSubMenu( itemTarget, subMenu );
+			this.closeSubMenu( targetItem, subMenu );
 		}
 	}
 
-	openSubMenu( itemTarget, subMenu ) {
-		itemTarget.setAttribute( 'aria-expanded', 'true' );
+	openSubMenu( targetItem, subMenu ) {
+		targetItem.setAttribute( 'aria-expanded', 'true' );
 		subMenu.setAttribute( 'aria-hidden', 'false' );
 	}
 
-	closeSubMenu( itemTarget, subMenu ) {
-		itemTarget.setAttribute( 'aria-expanded', 'false' );
+	closeSubMenu( targetItem, subMenu ) {
+		targetItem.setAttribute( 'aria-expanded', 'false' );
 		subMenu.setAttribute( 'aria-hidden', 'true' );
 	}
 
@@ -207,5 +209,5 @@ class elementorHelloPlusHeaderHandler {
 }
 
 window.addEventListener( 'elementor/frontend/init', () => {
-	elementorFrontend.hooks.addAction( 'frontend/element_ready/header.default', () => new elementorHelloPlusHeaderHandler() );
+	elementorFrontend.hooks.addAction( 'frontend/element_ready/emp-header.default', () => new elementorHelloPlusHeaderHandler() );
 } );
diff --git a/modules/template-parts/assets/scss/hello-plus-header.scss b/modules/template-parts/assets/scss/hello-plus-header.scss
index d85e4ac1..55104503 100644
--- a/modules/template-parts/assets/scss/hello-plus-header.scss
+++ b/modules/template-parts/assets/scss/hello-plus-header.scss
@@ -63,6 +63,7 @@
 	--header-button-icon-size: var(--header-button-primary-icon-size);
 
 	--header-toggle-icon-color: #555963;
+	--header-toggle-icon-color-active: #555963;
 	--header-toggle-icon-size: 22px;
 
 	--header-menu-item-color: #555963;
@@ -95,6 +96,7 @@
 
 	--header-dropdown-text-align: flex-start;
 	--header-dropdown-divider-color: #E0E1E2;
+	--header-dropdown-divider-width: 1px;
 
 	--header-box-padding-block-start: 16px;
 	--header-box-padding-block-end: 16px;
@@ -159,10 +161,27 @@
 		}
 	}
 
+	&.has-align-link {
+
+		&-start {
+
+		}
+
+		&-center {
+
+			.ehp-header__site-link {
+				grid-area: center;
+				justify-content: center;
+			}
+		}
+	}
+
 	&__elements-container {
-		display: flex;
+		display: grid;
+		grid-template-areas:
+			"start center end";
+		grid-template-columns: repeat(3, 1fr);
 		flex-grow: 1;
-		justify-content: space-between;
 		position: relative;
 
 		& > .ehp-header__ctas-container {
@@ -174,8 +193,6 @@
 	&__site-link {
 		align-items: center;
 		display: flex;
-		order: var(--header-logo-order);
-		justify-content: var(--header-logo-order);
 
 		img {
 			width: var(--header-logo-width);
@@ -209,6 +226,12 @@
 			transition: $transition;
 		}
 
+		svg {
+			fill: currentColor;
+			height: 1em; // height is relative to the font-size
+			width: 1em; // width is relative to the font-size
+		}
+
 		&.has-border {
 			border-color: var(--header-button-border-color);
 			border-style: solid;
@@ -285,6 +308,7 @@
 		cursor: pointer;
 		display: none;
 		grid-area: end;
+		justify-content: flex-end;
 		order: 3;
 		padding: 0;
 
@@ -299,6 +323,11 @@
 			width: var(--header-toggle-icon-size);
 		}
 
+		.ehp-header__toggle-icon--close {
+			color: var(--header-toggle-icon-color-active);
+			fill: var(--header-toggle-icon-color-active);
+		}
+
 		i {
 			color: var(--header-toggle-icon-color);
 			font-size: var(--header-toggle-icon-size);
@@ -546,7 +575,7 @@
 				&.has-responsive-divider {
 
 					& > .menu-item {
-						border-bottom: 1px solid var(--header-dropdown-divider-color);
+						border-bottom: var(--header-dropdown-divider-width) solid var(--header-dropdown-divider-color);
 						padding-block-end: var(--header-menu-item-spacing);
 						width: 100%;
 
@@ -559,6 +588,10 @@
 			}
 		}
 
+		.menu-item {
+			justify-content: var(--header-dropdown-text-align);
+		}
+
 		.menu-item.menu-item-has-children {
 			align-items: var(--header-dropdown-text-align);
 			display: flex;
@@ -574,7 +607,15 @@
 
 	@mixin responsive_styles_desktop {
 
+		&.has-align-link-start {
+
+			.ehp-header__navigation {
+				justify-content: center;
+			}
+		}
+
 		.ehp-header {
+
 			&__navigation {
 				align-items: center;
 				background: none !important; // Override the default background color
@@ -585,10 +626,6 @@
 				}
 			}
 
-			&__ghost-element {
-				display: none;
-			}
-
 			&__dropdown {
 				padding: 16px 32px;
 
diff --git a/modules/template-parts/classes/render/widget-header-render.php b/modules/template-parts/classes/render/widget-header-render.php
index d0687d71..48239d42 100644
--- a/modules/template-parts/classes/render/widget-header-render.php
+++ b/modules/template-parts/classes/render/widget-header-render.php
@@ -34,6 +34,8 @@ public function render(): void {
 		$behavior_float = $this->settings['behavior_float'];
 		$behavior_float_shape = $this->settings['behavior_float_shape'];
 		$behavior_on_scroll = $this->settings['behavior_onscroll_select'];
+		$align_logo = $this->settings['style_align_logo'];
+		$align_title = $this->settings['style_align_title'];
 
 		if ( ! empty( $navigation_breakpoint ) ) {
 			$layout_classnames .= ' has-navigation-breakpoint-' . $navigation_breakpoint;
@@ -55,6 +57,14 @@ public function render(): void {
 			$layout_classnames .= ' has-behavior-onscroll-' . $behavior_on_scroll;
 		}
 
+		if ( ! empty( $align_logo ) ) {
+			$layout_classnames .= ' has-align-link-' . $align_logo;
+		}
+
+		if ( ! empty( $align_title ) ) {
+			$layout_classnames .= ' has-align-link-' . $align_title;
+		}
+
 		$render_attributes = [
 			'class' => $layout_classnames,
 			'data-scroll-behavior' => $behavior_on_scroll,
@@ -190,7 +200,7 @@ public function render_navigation(): void {
 			'ehp-header__navigation',
 		] );
 		?>
-		<span class="ehp-header__ghost-element"></span>
+		<!-- <span class="ehp-header__ghost-element"></span> -->
 
 		<nav <?php $this->widget->print_render_attribute_string( 'main-menu' ); ?>>
 			<?php
diff --git a/modules/template-parts/widgets/ehp-footer.php b/modules/template-parts/widgets/ehp-footer.php
index ab4f9a6e..e8ea9776 100644
--- a/modules/template-parts/widgets/ehp-footer.php
+++ b/modules/template-parts/widgets/ehp-footer.php
@@ -17,7 +17,9 @@
 use HelloPlus\Includes\Utils as Theme_Utils;
 
 use HelloPlus\Modules\TemplateParts\Classes\{
-	Render\Widget_Footer_Render
+	Render\Widget_Footer_Render,
+	Traits\Shared_Header_Traits,
+	Control_Media_Preview,
 };
 
 use HelloPlus\Modules\Theme\Module as Theme_Module;
@@ -108,14 +110,18 @@ public function add_content_brand_section(): void {
 		$this->add_control(
 			'site_logo_image',
 			[
-				'label' => esc_html__( 'Choose Image', 'hello-plus' ),
-				'type' => Controls_Manager::MEDIA,
+				'label' => esc_html__( 'Site Logo', 'hello-plus' ),
+				'type' => Control_Media_Preview::CONTROL_TYPE,
+				'src' => $this->get_site_logo_url(),
 				'default' => [
 					'url' => $this->get_site_logo_url(),
 				],
 				'condition' => [
 					'site_logo_brand_select' => 'logo',
 				],
+			],
+			[
+				'recursive' => true,
 			]
 		);
 
diff --git a/modules/template-parts/widgets/ehp-header.php b/modules/template-parts/widgets/ehp-header.php
index 3592091d..c0d0f98f 100644
--- a/modules/template-parts/widgets/ehp-header.php
+++ b/modules/template-parts/widgets/ehp-header.php
@@ -82,7 +82,7 @@ protected function add_content_site_logo_section() {
 		$this->start_controls_section(
 			'site_logo_label',
 			[
-				'label' => esc_html__( 'Site Logo', 'hello-plus' ),
+				'label' => esc_html__( 'Site Identity', 'hello-plus' ),
 				'tab' => Controls_Manager::TAB_CONTENT,
 			]
 		);
@@ -94,7 +94,7 @@ protected function add_content_site_logo_section() {
 				'type' => Controls_Manager::SELECT,
 				'options' => [
 					'logo' => esc_html__( 'Site Logo', 'hello-plus' ),
-					'title' => esc_html__( 'Site Title', 'hello-plus' ),
+					'title' => esc_html__( 'Site Name', 'hello-plus' ),
 				],
 				'default' => 'logo',
 				'tablet_default' => 'logo',
@@ -147,7 +147,7 @@ protected function add_content_site_logo_section() {
 			[
 				'type' => Controls_Manager::ALERT,
 				'alert_type' => 'info',
-				'content' => esc_html__( 'Go to', 'hello-plus' ) . ' <a href="#" onclick="helloPlusLogo.openSiteIdentity( event )" >' . esc_html__( 'Site Identity > Site Description', 'hello-plus' ) . '</a>' . esc_html__( ' to edit the Site Title', 'hello-plus' ),
+				'content' => esc_html__( 'Go to', 'hello-plus' ) . ' <a href="#" onclick="helloPlusLogo.openSiteIdentity( event )" >' . esc_html__( 'Site Identity > Site Description', 'hello-plus' ) . '</a>' . esc_html__( ' to edit the Site Name', 'hello-plus' ),
 				'condition' => [
 					'site_logo_brand_select' => 'title',
 				],
@@ -191,7 +191,7 @@ protected function add_content_navigation_section() {
 		$this->add_control(
 			'navigation_menu_name',
 			[
-				'label' => esc_html__( 'Menu Name', 'hello-plus' ),
+				'label' => esc_html__( 'Accessible Name', 'hello-plus' ),
 				'type' => Controls_Manager::TEXT,
 				'default' => esc_html__( 'Menu', 'hello-plus' ),
 			]
@@ -409,27 +409,27 @@ protected function add_style_site_identity_section() {
 			]
 		);
 
-		$this->add_responsive_control(
+		$this->add_control(
 			'style_align_logo',
 			[
 				'label' => esc_html__( 'Align Logo', 'hello-plus' ),
 				'type' => Controls_Manager::CHOOSE,
 				'options' => [
-					'0' => [
+					'start' => [
 						'title' => esc_html__( 'Start', 'hello-plus' ),
 						'icon' => 'eicon-align-start-h',
 					],
-					'2' => [
+					'center' => [
 						'title' => esc_html__( 'Center', 'hello-plus' ),
 						'icon' => 'eicon-align-center-h',
 					],
 				],
-				'default' => '0',
-				'tablet_default' => '0',
-				'mobile_default' => '0',
-				'selectors' => [
-					'{{WRAPPER}} .ehp-header' => '--header-logo-order: {{VALUE}};',
-				],
+				'default' => 'start',
+				'tablet_default' => 'start',
+				'mobile_default' => 'start',
+				// 'selectors' => [
+				// 	'{{WRAPPER}} .ehp-header' => '--header-logo-order: {{VALUE}};',
+				// ],
 				'condition' => [
 					'site_logo_brand_select' => 'logo',
 				],
@@ -473,24 +473,24 @@ protected function add_style_site_identity_section() {
 		$this->add_responsive_control(
 			'style_align_title',
 			[
-				'label' => esc_html__( 'Align Site Title', 'hello-plus' ),
+				'label' => esc_html__( 'Align Site Name', 'hello-plus' ),
 				'type' => Controls_Manager::CHOOSE,
 				'options' => [
-					'0' => [
+					'start' => [
 						'title' => esc_html__( 'Start', 'hello-plus' ),
 						'icon' => 'eicon-align-start-h',
 					],
-					'2' => [
-						'title' => esc_html__( 'End', 'hello-plus' ),
+					'center' => [
+						'title' => esc_html__( 'Center', 'hello-plus' ),
 						'icon' => 'eicon-align-center-h',
 					],
 				],
-				'default' => '0',
-				'tablet_default' => '0',
-				'mobile_default' => '0',
-				'selectors' => [
-					'{{WRAPPER}} .ehp-header' => '--header-logo-order: {{VALUE}};',
-				],
+				'default' => 'start',
+				'tablet_default' => 'start',
+				'mobile_default' => 'start',
+				// 'selectors' => [
+				// 	'{{WRAPPER}} .ehp-header' => '--header-logo-order: {{VALUE}};',
+				// ],
 				'condition' => [
 					'site_logo_brand_select' => 'title',
 				],
@@ -852,9 +852,6 @@ protected function add_style_navigation_section() {
 					'vertical' => 'Vertical',
 				],
 				'default' => 'horizontal',
-				'selectors' => [
-					'{{WRAPPER}} .ehp-cta' => '--cta-text-heading-width: var(--cta-text-{{VALUE}}-heading); --cta-text-description-width: var(--cta-text-{{VALUE}}-description);',
-				],
 			]
 		);
 
@@ -870,9 +867,6 @@ protected function add_style_navigation_section() {
 					'round' => 'Round',
 				],
 				'default' => 'default',
-				'selectors' => [
-					'{{WRAPPER}} .ehp-cta' => '--cta-text-heading-width: var(--cta-text-{{VALUE}}-heading); --cta-text-description-width: var(--cta-text-{{VALUE}}-description);',
-				],
 			]
 		);
 
@@ -881,11 +875,19 @@ protected function add_style_navigation_section() {
 			[
 				'label' => esc_html__( 'Responsive Menu', 'hello-plus' ),
 				'type' => Controls_Manager::HEADING,
-				'description' => 'To preview, select a responsive viewport icon.',
 				'separator' => 'before',
 			]
 		);
 
+		$this->add_control(
+			'style_responsive_menu_alert',
+			[
+				'type' => Controls_Manager::ALERT,
+				'alert_type' => 'info',
+				'content' => esc_html__( 'To preview, select a responsive viewport icon.', 'hello-plus' ),
+			]
+		);
+
 		$this->add_control(
 			'style_responsive_menu_align',
 			[
@@ -956,7 +958,7 @@ protected function add_style_navigation_section() {
 					'unit' => 'px',
 				],
 				'selectors' => [
-					'{{WRAPPER}} .ehp-cta' => '--cta-button-border-width: {{SIZE}}{{UNIT}};',
+					'{{WRAPPER}} .ehp-header' => '--header-dropdown-divider-width: {{SIZE}}{{UNIT}};',
 				],
 				'condition' => [
 					'style_responsive_menu_divider' => 'yes',
@@ -1036,7 +1038,7 @@ protected function add_style_navigation_section() {
 					'default' => Global_Colors::COLOR_TEXT,
 				],
 				'selectors' => [
-					'{{WRAPPER}} .ehp-cta' => '--cta-button-text-color: {{VALUE}}',
+					'{{WRAPPER}} .ehp-header' => '--header-toggle-icon-color-active: {{VALUE}}',
 				],
 			]
 		);
@@ -1218,18 +1220,6 @@ protected function add_cta_button_controls( string $type, bool $add_condition =
 			]
 		);
 
-		$this->add_group_control(
-			Group_Control_Typography::get_type(),
-			[
-				'name' => $type . '_button_typography',
-				'selector' => '{{WRAPPER}} .ehp-header__button--' . $type,
-				'global' => [
-					'default' => Global_Typography::TYPOGRAPHY_ACCENT,
-				],
-				'condition' => $add_type_condition,
-			]
-		);
-
 		$this->add_responsive_control(
 			$type . '_button_icon_position',
 			[
@@ -1289,6 +1279,18 @@ protected function add_cta_button_controls( string $type, bool $add_condition =
 			]
 		);
 
+		$this->add_group_control(
+			Group_Control_Typography::get_type(),
+			[
+				'name' => $type . '_button_typography',
+				'selector' => '{{WRAPPER}} .ehp-header__button--' . $type,
+				'global' => [
+					'default' => Global_Typography::TYPOGRAPHY_ACCENT,
+				],
+				'condition' => $add_type_condition,
+			]
+		);
+
 		$this->start_controls_tabs(
 			$type . '_button_style'
 		);
@@ -1699,7 +1701,7 @@ private function add_style_behavior_section(): void {
 		$this->add_control(
 			'behavior_sticky_scale_title',
 			[
-				'label' => esc_html__( 'Scale Site Title', 'hello-plus' ),
+				'label' => esc_html__( 'Scale Site Name', 'hello-plus' ),
 				'type' => Controls_Manager::SWITCHER,
 				'label_on' => esc_html__( 'Yes', 'hello-plus' ),
 				'label_off' => esc_html__( 'No', 'hello-plus' ),

From ca6e581da8d37171566cd3d1c0ac78857d3111a5 Mon Sep 17 00:00:00 2001
From: Maggie Serino <maggie.serino@10up.com>
Date: Thu, 7 Nov 2024 15:12:21 +0100
Subject: [PATCH 2/6] TMZ-74 Header comments 1st round

---
 .../assets/js/hello-plus-header.js            |  2 +-
 .../assets/scss/hello-plus-header.scss        | 94 ++++++++++++-------
 .../classes/render/widget-footer-render.php   |  4 +-
 .../classes/render/widget-header-render.php   | 19 +++-
 modules/template-parts/widgets/ehp-header.php | 67 +++++++++++--
 5 files changed, 142 insertions(+), 44 deletions(-)

diff --git a/modules/template-parts/assets/js/hello-plus-header.js b/modules/template-parts/assets/js/hello-plus-header.js
index 469cd5b6..d8bad896 100644
--- a/modules/template-parts/assets/js/hello-plus-header.js
+++ b/modules/template-parts/assets/js/hello-plus-header.js
@@ -209,5 +209,5 @@ class elementorHelloPlusHeaderHandler {
 }
 
 window.addEventListener( 'elementor/frontend/init', () => {
-	elementorFrontend.hooks.addAction( 'frontend/element_ready/emp-header.default', () => new elementorHelloPlusHeaderHandler() );
+	elementorFrontend.hooks.addAction( 'frontend/element_ready/ehp-header.default', () => new elementorHelloPlusHeaderHandler() );
 } );
diff --git a/modules/template-parts/assets/scss/hello-plus-header.scss b/modules/template-parts/assets/scss/hello-plus-header.scss
index 55104503..99182671 100644
--- a/modules/template-parts/assets/scss/hello-plus-header.scss
+++ b/modules/template-parts/assets/scss/hello-plus-header.scss
@@ -119,6 +119,10 @@
 	&.has-behavior-float {
 		--header-float-offset: 16px;
 		--header-float-width: 1140px;
+
+		&.has-box-border {
+			border: var(--header-box-border-width) solid var(--header-box-border-color);
+		}
 	}
 
 	&.has-behavior-onscroll-always,
@@ -141,38 +145,33 @@
 		}
 	}
 
-	& .has-shape,
-	&.has-shape {
-
-		&-sharp {
-			border-radius: $corners-shape-sharp;
-		}
+	&.has-align-link {
 
-		&-rounded {
-			border-radius: $corners-shape-rounded;
-		}
+		&-center {
 
-		&-round {
-			border-radius: $corners-shape-round;
+			.ehp-header__site-link {
+				grid-area: center;
+				justify-content: center;
+			}
 		}
+	}
 
+	&.has-shape {
+			
 		&-default {
-			border-radius: $corners-shape-default;
+			border-radius: $submenu-shape-default;
 		}
-	}
-
-	&.has-align-link {
-
-		&-start {
 
+		&-sharp {
+			border-radius: $submenu-shape-sharp;
 		}
 
-		&-center {
+		&-rounded {
+			border-radius: $submenu-shape-rounded;
+		}
 
-			.ehp-header__site-link {
-				grid-area: center;
-				justify-content: center;
-			}
+		&-round {
+			border-radius: $submenu-shape-round;
 		}
 	}
 
@@ -267,6 +266,25 @@
 			}
 		}
 
+		&.has-shape {
+
+			&-sharp {
+				border-radius: $corners-shape-sharp;
+			}
+	
+			&-rounded {
+				border-radius: $corners-shape-rounded;
+			}
+	
+			&-round {
+				border-radius: $corners-shape-round;
+			}
+	
+			&-default {
+				border-radius: $corners-shape-default;
+			}
+		}
+
 		&--secondary {
 			--header-button-text-color: var(--header-button-secondary-text-color);
 			--header-button-text-color-hover: var(--header-button-secondary-text-color-hover);
@@ -510,16 +528,22 @@
 		
 		&.scroll-down {
 			transition: $transition;
-			
-			.ehp-header__site-link img {
-				width: var(--header-logo-width-sticky);
-				transition: $transition;
+
+			&.has-behavior-sticky-scale-logo {
+
+				.ehp-header__site-link img {
+					width: var(--header-logo-width-sticky);
+					transition: $transition;
+				}
 			}
 
-			.ehp-header__site-title {
-				font-size: var(--header-title-size-sticky);
-				font-weight: var(--header-title-weight-sticky);
-				transition: $transition;
+			&.has-behavior-sticky-scale-title {
+
+				.ehp-header__site-title {
+					font-size: var(--header-title-size-sticky);
+					font-weight: var(--header-title-weight-sticky);
+					transition: $transition;
+				}
 			}
 		}
 	}
@@ -546,8 +570,6 @@
 				left: calc(-1 * var(--header-box-padding-inline-start));
 				padding-block-start: var(--header-box-padding-block-start);
 				padding-block-end: var(--header-box-padding-block-end);
-				padding-inline-start: var(--header-box-padding-inline-start);
-				padding-inline-end: var(--header-box-padding-inline-end);
 				position: absolute;
 				top: calc(100% + var(--header-box-padding-block-end));
 				width: calc(100% + var(--header-box-padding-inline-start) + var(--header-box-padding-inline-end));
@@ -571,6 +593,8 @@
 				align-items: var(--header-dropdown-text-align);
 				display: flex;
 				flex-direction: column;
+				padding-inline-start: var(--header-box-padding-inline-start);
+				padding-inline-end: var(--header-box-padding-inline-end);
 
 				&.has-responsive-divider {
 
@@ -586,6 +610,11 @@
 					}
 				}
 			}
+
+			&__ctas-container.has-responsive-width-default {
+				padding-inline-start: var(--header-box-padding-inline-start);
+				padding-inline-end: var(--header-box-padding-inline-end);
+			}
 		}
 
 		.menu-item {
@@ -602,6 +631,7 @@
 			& .ehp-header__dropdown-toggle[aria-expanded="true"] {
 				margin-bottom: var(--header-menu-item-spacing);
 			}
+
 		}
 	}
 
diff --git a/modules/template-parts/classes/render/widget-footer-render.php b/modules/template-parts/classes/render/widget-footer-render.php
index 3eb703c1..8114f4f5 100644
--- a/modules/template-parts/classes/render/widget-footer-render.php
+++ b/modules/template-parts/classes/render/widget-footer-render.php
@@ -41,7 +41,7 @@ public function render(): void {
 		$this->maybe_add_advanced_attributes();
 
 		?>
-		<div <?php $this->widget->print_render_attribute_string( 'layout' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
+		<footer <?php $this->widget->print_render_attribute_string( 'layout' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
 			<div class="ehp-footer__row">
 				<?php
 					$this->render_side_content();
@@ -50,7 +50,7 @@ public function render(): void {
 				?>
 			</div>
 			<?php $this->render_copyright(); ?>
-		</div>
+		</footer>
 		<?php
 	}
 
diff --git a/modules/template-parts/classes/render/widget-header-render.php b/modules/template-parts/classes/render/widget-header-render.php
index 48239d42..1ead7597 100644
--- a/modules/template-parts/classes/render/widget-header-render.php
+++ b/modules/template-parts/classes/render/widget-header-render.php
@@ -36,6 +36,8 @@ public function render(): void {
 		$behavior_on_scroll = $this->settings['behavior_onscroll_select'];
 		$align_logo = $this->settings['style_align_logo'];
 		$align_title = $this->settings['style_align_title'];
+		$behavior_scale_logo = $this->settings['behavior_sticky_scale_logo'];
+		$behavior_scale_title = $this->settings['behavior_sticky_scale_title'];
 
 		if ( ! empty( $navigation_breakpoint ) ) {
 			$layout_classnames .= ' has-navigation-breakpoint-' . $navigation_breakpoint;
@@ -49,6 +51,14 @@ public function render(): void {
 			$layout_classnames .= ' has-behavior-float';
 		}
 
+		if ( 'yes' === $behavior_scale_logo ) {
+			$layout_classnames .= ' has-behavior-sticky-scale-logo';
+		}
+
+		if ( 'yes' === $behavior_scale_title ) {
+			$layout_classnames .= ' has-behavior-sticky-scale-title';
+		}
+
 		if ( ! empty( $behavior_float_shape ) ) {
 			$layout_classnames .= ' has-shape-' . $behavior_float_shape;
 		}
@@ -76,7 +86,7 @@ public function render(): void {
 		$this->maybe_add_advanced_attributes();
 
 		?>
-		<div <?php $this->widget->print_render_attribute_string( 'layout' ); ?>>
+		<header <?php $this->widget->print_render_attribute_string( 'layout' ); ?>>
 			<div class="ehp-header__elements-container">
 				<?php
 				$this->render_site_link();
@@ -84,7 +94,7 @@ public function render(): void {
 				$this->render_ctas_container();
 				?>
 			</div>
-		</div>
+		</header>
 		<?php
 	}
 
@@ -247,9 +257,14 @@ protected function render_ctas_container() {
 		$secondary_cta_button_text = $this->settings['secondary_cta_button_text'];
 		$has_primary_button = ! empty( $primary_cta_button_text );
 		$has_secondary_button = ! empty( $secondary_cta_button_text );
+		$responsive_button_width = $this->settings['cta_responsive_width'] ?? '';
 
 		$ctas_container_classnames = self::CTAS_CONTAINER_CLASSNAME;
 
+		if ( '' !== $responsive_button_width ) {
+			$ctas_container_classnames .= ' has-responsive-width-' . $responsive_button_width;
+		}
+
 		$this->widget->add_render_attribute( 'ctas-container', [
 			'class' => $ctas_container_classnames,
 		] );
diff --git a/modules/template-parts/widgets/ehp-header.php b/modules/template-parts/widgets/ehp-header.php
index c0d0f98f..82ad4800 100644
--- a/modules/template-parts/widgets/ehp-header.php
+++ b/modules/template-parts/widgets/ehp-header.php
@@ -238,6 +238,13 @@ protected function add_content_navigation_section() {
 						'value' => 'fas fa-bars',
 						'library' => 'fa-solid',
 					],
+					'recommended' => [
+						'fa-solid' => [
+							'ellipsis-v',
+							'ellipsis-h',
+							'bars',
+						],
+					],
 					'exclude_inline_options' => [ 'none' ],
 				]
 			);
@@ -268,6 +275,18 @@ protected function add_content_navigation_section() {
 						'value' => 'fas fa-caret-down',
 						'library' => 'fa-solid',
 					],
+					'recommended' => [
+						'fa-solid' => [
+							'caret-down',
+							'chevron-down',
+							'angle-down',
+							'chevron-circle-down',
+							'caret-square-down',
+						],
+						'fa-regular' => [
+							'caret-square-down',
+						],
+					],
 					'exclude_inline_options' => [ 'svg' ],
 				]
 			);
@@ -427,9 +446,6 @@ protected function add_style_site_identity_section() {
 				'default' => 'start',
 				'tablet_default' => 'start',
 				'mobile_default' => 'start',
-				// 'selectors' => [
-				// 	'{{WRAPPER}} .ehp-header' => '--header-logo-order: {{VALUE}};',
-				// ],
 				'condition' => [
 					'site_logo_brand_select' => 'logo',
 				],
@@ -488,9 +504,6 @@ protected function add_style_site_identity_section() {
 				'default' => 'start',
 				'tablet_default' => 'start',
 				'mobile_default' => 'start',
-				// 'selectors' => [
-				// 	'{{WRAPPER}} .ehp-header' => '--header-logo-order: {{VALUE}};',
-				// ],
 				'condition' => [
 					'site_logo_brand_select' => 'title',
 				],
@@ -1063,6 +1076,47 @@ protected function add_style_cta_section() {
 
 		$this->add_cta_button_controls( 'secondary', true );
 
+		$this->add_control(
+			'cta_responsive_width',
+			[
+				'label' => esc_html__( 'Responsive Width', 'hello-plus' ),
+				'type' => Controls_Manager::SELECT,
+				'default' => 'default',
+				'options' => [
+					'default' => esc_html__( 'Default', 'hello-plus' ),
+					'stretch' => esc_html__( 'Stretch', 'hello-plus' ),
+				],
+				'separator' => 'before',
+			]
+		);
+
+		$this->add_responsive_control(
+			'cta_button_spacing',
+			[
+				'label' => esc_html__( 'Space Between', 'hello-plus' ),
+				'type' => Controls_Manager::SLIDER,
+				'size_units' => [ 'px', 'em', 'rem', '%', 'custom' ],
+				'range' => [
+					'px' => [
+						'min' => 0,
+						'max' => 100,
+						'step' => 1,
+					],
+				],
+				'default' => [
+					'size' => 16,
+					'unit' => 'px',
+				],
+				'selectors' => [
+					'{{WRAPPER}} .ehp-header' => '--header-buttons-space-between: {{SIZE}}{{UNIT}};',
+				],
+				'condition' => [
+					'secondary_cta_show' => 'yes',
+				],
+				'separator' => 'before',
+			]
+		);
+
 		$this->end_controls_section();
 	}
 
@@ -1604,7 +1658,6 @@ private function add_style_behavior_section(): void {
 			]
 		);
 
-		// TODO: check if this needs to be responsive
 		$this->add_control(
 			'behavior_onscroll_select',
 			[

From 70f40d256efac2db79af5e8a1f54c36dea4ce63d Mon Sep 17 00:00:00 2001
From: Maggie Serino <maggie.serino@10up.com>
Date: Thu, 7 Nov 2024 15:26:09 +0100
Subject: [PATCH 3/6] TMZ-74 nits

---
 modules/template-parts/classes/render/widget-header-render.php | 1 -
 modules/template-parts/widgets/ehp-header.php                  | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/modules/template-parts/classes/render/widget-header-render.php b/modules/template-parts/classes/render/widget-header-render.php
index 1ead7597..776ec2a5 100644
--- a/modules/template-parts/classes/render/widget-header-render.php
+++ b/modules/template-parts/classes/render/widget-header-render.php
@@ -210,7 +210,6 @@ public function render_navigation(): void {
 			'ehp-header__navigation',
 		] );
 		?>
-		<!-- <span class="ehp-header__ghost-element"></span> -->
 
 		<nav <?php $this->widget->print_render_attribute_string( 'main-menu' ); ?>>
 			<?php
diff --git a/modules/template-parts/widgets/ehp-header.php b/modules/template-parts/widgets/ehp-header.php
index 82ad4800..d6f74f48 100644
--- a/modules/template-parts/widgets/ehp-header.php
+++ b/modules/template-parts/widgets/ehp-header.php
@@ -486,7 +486,7 @@ protected function add_style_site_identity_section() {
 			]
 		);
 
-		$this->add_responsive_control(
+		$this->add_control(
 			'style_align_title',
 			[
 				'label' => esc_html__( 'Align Site Name', 'hello-plus' ),

From 2cd26a58881b97062955fcedfb3ae5e5dedde13c Mon Sep 17 00:00:00 2001
From: Maggie Serino <maggie.serino@10up.com>
Date: Thu, 7 Nov 2024 15:31:05 +0100
Subject: [PATCH 4/6] TMZ-74 rename title to name

---
 modules/template-parts/widgets/ehp-footer.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/modules/template-parts/widgets/ehp-footer.php b/modules/template-parts/widgets/ehp-footer.php
index e8ea9776..6ba8d9e8 100644
--- a/modules/template-parts/widgets/ehp-footer.php
+++ b/modules/template-parts/widgets/ehp-footer.php
@@ -99,7 +99,7 @@ public function add_content_brand_section(): void {
 				'type' => Controls_Manager::SELECT,
 				'options' => [
 					'logo' => 'Site Logo',
-					'title' => 'Site Title',
+					'title' => 'Site Name',
 				],
 				'default' => 'logo',
 				'tablet_default' => 'logo',
@@ -152,7 +152,7 @@ public function add_content_brand_section(): void {
 			[
 				'type' => Controls_Manager::ALERT,
 				'alert_type' => 'info',
-				'content' => esc_html__( 'Go to', 'hello-plus' ) . ' <a href="#" onclick="helloPlusLogo.openSiteIdentity( event )" >' . esc_html__( 'Site Identity > Site Description', 'hello-plus' ) . '</a>' . esc_html__( ' to edit the Site Title', 'hello-plus' ),
+				'content' => esc_html__( 'Go to', 'hello-plus' ) . ' <a href="#" onclick="helloPlusLogo.openSiteIdentity( event )" >' . esc_html__( 'Site Identity > Site Description', 'hello-plus' ) . '</a>' . esc_html__( ' to edit the Site Name', 'hello-plus' ),
 				'condition' => [
 					'site_logo_brand_select' => 'title',
 				],
@@ -527,7 +527,7 @@ public function add_style_brand_section(): void {
 		$this->add_control(
 			'site_title_heading',
 			[
-				'label' => esc_html__( 'Site Title', 'hello-plus' ),
+				'label' => esc_html__( 'Site Name', 'hello-plus' ),
 				'type' => Controls_Manager::HEADING,
 				'condition' => [
 					'site_logo_brand_select' => 'title',

From f4caf04a7e4040e670468b806f97f2bf9f1149c1 Mon Sep 17 00:00:00 2001
From: Maggie Serino <maggie.serino@10up.com>
Date: Fri, 8 Nov 2024 10:22:59 +0100
Subject: [PATCH 5/6] TMZ-74 advanced tab

---
 modules/template-parts/widgets/ehp-footer.php |  1 -
 modules/template-parts/widgets/ehp-header.php | 10 +++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/modules/template-parts/widgets/ehp-footer.php b/modules/template-parts/widgets/ehp-footer.php
index 6ba8d9e8..8541caa0 100644
--- a/modules/template-parts/widgets/ehp-footer.php
+++ b/modules/template-parts/widgets/ehp-footer.php
@@ -67,7 +67,6 @@ protected function render(): void {
 	protected function register_controls(): void {
 		$this->add_content_section();
 		$this->add_style_section();
-		$this->add_advanced_tab();
 	}
 
 	public function add_content_section(): void {
diff --git a/modules/template-parts/widgets/ehp-header.php b/modules/template-parts/widgets/ehp-header.php
index d6f74f48..6f048539 100644
--- a/modules/template-parts/widgets/ehp-header.php
+++ b/modules/template-parts/widgets/ehp-header.php
@@ -75,7 +75,11 @@ protected function add_style_tab() {
 		$this->add_style_navigation_section();
 		$this->add_style_cta_section();
 		$this->add_style_box_section();
-		$this->add_style_behavior_section();
+	}
+
+	protected function add_advanced_tab(): void {
+		$this->add_advanced_behavior_section();
+		parent::add_advanced_tab();
 	}
 
 	protected function add_content_site_logo_section() {
@@ -1561,12 +1565,12 @@ protected function add_cta_button_controls( string $type, bool $add_condition =
 		);
 	}
 
-	private function add_style_behavior_section(): void {
+	private function add_advanced_behavior_section(): void {
 		$this->start_controls_section(
 			'advanced_behavior_section',
 			[
 				'label' => esc_html__( 'Behavior', 'hello-plus' ),
-				'tab' => Controls_Manager::TAB_STYLE,
+				'tab' => Controls_Manager::TAB_ADVANCED,
 			]
 		);
 

From 6a38f5f52b5c52775837370b3f99d9780bb154cb Mon Sep 17 00:00:00 2001
From: Maggie Serino <maggie.serino@10up.com>
Date: Tue, 12 Nov 2024 10:37:00 +0100
Subject: [PATCH 6/6] TMZ-74 addressing CR comments

---
 modules/template-parts/widgets/ehp-footer.php |  5 ++--
 modules/template-parts/widgets/ehp-header.php |  3 +--
 .../widgets/ehp-widget-base.php               | 24 +++++++++++++++++++
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/modules/template-parts/widgets/ehp-footer.php b/modules/template-parts/widgets/ehp-footer.php
index 8541caa0..d55f4eaa 100644
--- a/modules/template-parts/widgets/ehp-footer.php
+++ b/modules/template-parts/widgets/ehp-footer.php
@@ -18,13 +18,11 @@
 
 use HelloPlus\Modules\TemplateParts\Classes\{
 	Render\Widget_Footer_Render,
-	Traits\Shared_Header_Traits,
 	Control_Media_Preview,
 };
 
 use HelloPlus\Modules\Theme\Module as Theme_Module;
 
-
 class Ehp_Footer extends Ehp_Widget_Base {
 
 	public function get_name(): string {
@@ -67,6 +65,7 @@ protected function render(): void {
 	protected function register_controls(): void {
 		$this->add_content_section();
 		$this->add_style_section();
+		$this->add_advanced_tab();
 	}
 
 	public function add_content_section(): void {
@@ -82,6 +81,8 @@ public function add_style_section(): void {
 		$this->add_style_box_section();
 	}
 
+	public function add_custom_advanced_sections(): void {}
+
 	public function add_content_brand_section(): void {
 		$this->start_controls_section(
 			'site_logo_label',
diff --git a/modules/template-parts/widgets/ehp-header.php b/modules/template-parts/widgets/ehp-header.php
index 6f048539..a69c6763 100644
--- a/modules/template-parts/widgets/ehp-header.php
+++ b/modules/template-parts/widgets/ehp-header.php
@@ -77,9 +77,8 @@ protected function add_style_tab() {
 		$this->add_style_box_section();
 	}
 
-	protected function add_advanced_tab(): void {
+	public function add_custom_advanced_sections(): void {
 		$this->add_advanced_behavior_section();
-		parent::add_advanced_tab();
 	}
 
 	protected function add_content_site_logo_section() {
diff --git a/modules/template-parts/widgets/ehp-widget-base.php b/modules/template-parts/widgets/ehp-widget-base.php
index 89347177..5b92da51 100644
--- a/modules/template-parts/widgets/ehp-widget-base.php
+++ b/modules/template-parts/widgets/ehp-widget-base.php
@@ -22,6 +22,7 @@ protected function add_advanced_tab(): void {
 			esc_html__( 'Advanced', 'hello-plus' )
 		);
 
+		$this->add_custom_advanced_sections();
 		$this->add_basic_css_controls_section();
 
 		$elementor_plugin = Theme_Utils::elementor();
@@ -29,7 +30,30 @@ protected function add_advanced_tab(): void {
 		$elementor_plugin->controls_manager->add_custom_attributes_controls( $this, $advanced_tab_id );
 	}
 
+	abstract public function add_custom_advanced_sections(): void;
+
 	protected function add_basic_css_controls_section(): void {
+		$this->start_controls_section(
+			'advanced_responsive_section',
+			[
+				'label' => esc_html__( 'Responsive', 'hello-plus' ),
+				'tab' => Controls_Manager::TAB_ADVANCED,
+			]
+		);
+
+		$this->add_control(
+			'responsive_description',
+			[
+				'raw' => __( 'Responsive visibility will take effect only on preview mode or live page, and not while editing in Elementor.', 'hello-plus' ),
+				'type' => Controls_Manager::RAW_HTML,
+				'content_classes' => 'elementor-descriptor',
+			]
+		);
+
+		$this->add_hidden_device_controls();
+
+		$this->end_controls_section();
+
 		$this->start_controls_section(
 			'advanced_custom_controls_section',
 			[