Merge pull request #387 from awesomemotive/issue/382-Sticky-Header-Row-Option-Applies-to-Both-Rows

Header Builder: disconnect the bottom row from the main row when the main row is selected to be sticky

Author: DevWael

assets/js/src/custom.js

@@ -780,7 +780,17 @@ botiga.stickyHeader = {
 		let topVal = 0,
 			convertToPositive = false;
 
+		// Remove any existing sticky visibility classes
+		above_header_row.classList.remove( 'bhfb-sticky-hidden' );
+		main_header_row.classList.remove( 'bhfb-sticky-hidden' );
+		below_header_row.classList.remove( 'bhfb-sticky-hidden' );
+
 		if( bhfb.classList.contains( 'sticky-row-main-header-row' ) ) {
+			// Hide bottom row when main row is sticky
+			if( ! below_header_row.classList.contains( 'bt-d-none' ) ) {
+				below_header_row.classList.add( 'bhfb-sticky-hidden' );
+			}
+
 			if( ! above_header_row.classList.contains( 'bt-d-none' ) ) {
 				topVal = above_header_row.clientHeight;
 

assets/sass/bhfb.scss

@@ -34,6 +34,16 @@
     transition: ease background-color 300ms, ease border-bottom-color 300ms, ease height 300ms;
 }
 
+// Hide rows when sticky header is active and they shouldn't be visible
+.sticky-header-active .bhfb-sticky-hidden {
+    display: none !important;
+}
+
+// Hide bottom row when main row is sticky
+.sticky-header-active .sticky-row-main-header-row .bhfb-below_header_row {
+    display: none !important;
+}
+
 .bhfb-main_header_row {
     min-height: 100px;
 }