adjust footer submenus to open upwards

Author: jamesros161

src/assets/js/customizer/color/preview.js

@@ -452,6 +452,9 @@ export class Preview  {
 		css += `#${location}-menu.sm-clean > li.menu-item:not( .custom-sub-menu ) > ul.sub-menu:not(.custom-sub-menu):before,
 			#${location}-menu.sm-clean > li.menu-item:not( .custom-sub-menu ) > ul.sub-menu:not(.custom-sub-menu):after {
 				border-color: transparent transparent ${subcolorVariable} transparent;
+			}
+			#${location}-menu.sm-clean > li.menu-item:not( .custom-sub-menu ) > ul.sub-menu.pointer-bottom:not(.custom-sub-menu):after {
+				border-color: ${subcolorVariable} transparent transparent transparent;
 			}`;
 		css += '}';
 

src/assets/js/front-end.js

@@ -630,9 +630,7 @@ var BoldGrid = BoldGrid || {};
 				sm.on( {
 					'show.smapi': function( e, menu ) {
 						$( menu ).removeClass( 'hide-animation' ).addClass( 'show-animation' );
-						if ( $( menu ).is( '.custom-sub-menu' ) ) {
-							BoldGrid.standard_menu_enabled.fixSubmenuOffset( menu );
-						}
+						BoldGrid.standard_menu_enabled.fixSubmenuOffset( menu );
 					},
 					'hide.smapi': function( e, menu ) {
 						$( menu ).removeClass( 'show-animation' ).addClass( 'hide-animation' );
@@ -674,12 +672,27 @@ var BoldGrid = BoldGrid || {};
 			},
 
 			// Fixes the offset of custom submenus so they don't go off screen
-			fixSubmenuOffset( sm ) {
-				var $subMenu     = $( sm ),
-					leftOffset   = $subMenu.offset().left,
-					subMenuWidth = $subMenu.children( 'li' ).outerWidth(),
-					rightOffset  = $( window ).outerWidth( true ) - ( leftOffset + subMenuWidth );
+			fixSubmenuOffset( subMenu ) {
+				var $subMenu         = $( subMenu ),
+					leftOffset       = $subMenu.offset().left,
+					bottomOffset     = $subMenu.offset().top + $subMenu.outerHeight( true ),
+					$headerContainer = $subMenu.closest( '#masthead' ).length ? $subMenu.closest( '#masthead' ) : $subMenu.closest( '#colophon' ),
+					pointerHeight    = 9,
+					headerBottom     = $headerContainer.offset().top + $headerContainer.outerHeight(),
+					subMenuWidth     = $subMenu.children( 'li' ).outerWidth(),
+					subMenuHeight    = $subMenu.outerHeight( true ) + pointerHeight,
+					rightOffset      = $( window ).outerWidth( true ) - ( leftOffset + subMenuWidth );
+
+				// Adjust the offset for menu items in the footer so it opens upwards instead of down.
+				if ( bottomOffset > headerBottom && $subMenu.closest( '#colophon' ).length ) {
+					$subMenu.css( {
+						top: '-' + subMenuHeight + 'px'
+					} );
+
+					$subMenu.addClass( 'pointer-bottom' );
+				}
 
+				// Adjust left or right offset if submenu goes off screen.
 				if ( 0 > rightOffset ) {
 					$subMenu.css( 'left', rightOffset );
 				}

src/assets/scss/boldgrid/navigation/_base.scss

@@ -200,7 +200,7 @@
 			.sm-clean.nw,
 			.sm-clean.sw {
 				&:not( .sm-vertical ) {
-					li.menu-item:first-of-type a {
+					> li.menu-item:first-of-type a {
 						padding-left: 0px;
 					}
 				}
@@ -211,7 +211,7 @@
 			.sm-clean.ne,
 			.sm-clean.se {
 				&:not( .sm-vertical ) {
-					li.menu-item:last-of-type a {
+					> li.menu-item:last-of-type a {
 						padding-right: 0px;
 					}
 				}
@@ -285,12 +285,24 @@
 				border-style: dashed dashed solid dashed;
 				border-color: transparent transparent #bbbbbb transparent;
 			}
+			.sm-clean > li.menu-item > ul.sub-menu.pointer-bottom:not(.custom-sub-menu):before,
+			.sm-clean > li.menu-item > ul.sub-menu.pointer-bottom:not(.custom-sub-menu):after {
+				top: unset;
+				bottom: -18px;
+				border-style: solid dashed dashed dashed;
+				border-color: #bbbbbb transparent transparent transparent;
+			}
 			.sm-clean > li.menu-item > ul.sub-menu:not(.custom-sub-menu):after {
 				top: -16px;
 				left: 31px;
 				border-width: 8px;
 				border-color: transparent transparent white transparent;
 			}
+			.sm-clean > li.menu-item > ul.sub-menu.pointer-bottom:not(.custom-sub-menu):after {
+				top: unset;
+				bottom: -16px;
+				border-color: white transparent transparent transparent;
+			}
 			.sm-clean ul.sub-menu:not(.custom-sub-menu) {
 				border: 1px solid #bbbbbb;
 				padding: 5px 0;

src/includes/class-boldgrid-framework-styles.php

@@ -554,6 +554,10 @@ public function menu_css( $location ) {
 		$css .= "#{$location}-menu.sm-clean > li.menu-item:not( .custom-sub-menu ) > ul.sub-menu:not(.custom-sub-menu):after ";
 		$css .= "{ border-color: transparent transparent var(--{$submenu_background_class}) transparent; }";
 
+		$css .= "#{$location}-menu.sm-clean > li.menu-item:not( .custom-sub-menu ) > ul.sub-menu.pointer-bottom:not(.custom-sub-menu):before, ";
+		$css .= "#{$location}-menu.sm-clean > li.menu-item:not( .custom-sub-menu ) > ul.sub-menu.pointer-bottom:not(.custom-sub-menu):after ";
+		$css .= "{ border-color: var(--{$submenu_background_class}) transparent transparent transparent; }";
+
 		$css .= '}';
 
 		return $css;