Add footer navigation

assets/sass/06-components/footer-navigation.scss

@@ -0,0 +1,34 @@
+
+.footer-navigation {
+	font-size: var(--primary-nav--font-size);
+}
+
+.footer-navigation-wrapper {
+	display: flex;
+	position: relative;
+	justify-content: center;
+	flex-wrap: wrap;
+	list-style: none;
+	margin: 0 auto;
+	padding-left: 0;
+
+	li {
+		display: inline;
+		margin: var(--global--spacing-vertical) calc(0.5 * var(--global--spacing-horizontal));
+		position: relative;
+	}
+
+	a {
+		padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
+
+		&:hover {
+			text-decoration: underline;
+			text-decoration-style: dotted;
+			text-decoration-skip-ink: none;
+		}
+	}
+
+	.sub-menu-toggle {
+		display: none;
+	}
+}

assets/sass/style.scss

@@ -62,6 +62,7 @@
  * 404..................404 styles.
  * Search...............Search styles.
  * Navigation...........Navigation styles.
+ * Footer Navigation....Footer Navigation styles.
  * Pagination...........Pagination styles.
  * Single...............Single page and post styles.
  * Posts and pages......Misc, sticky post styles.
@@ -112,6 +113,7 @@
 @import "06-components/search";
 @import "06-components/comments";
 @import "06-components/navigation";
+@import "06-components/footer-navigation";
 @import "06-components/pagination";
 @import "06-components/widgets";
 

functions.php

@@ -58,6 +58,7 @@ function twenty_twenty_one_setup() {
 		register_nav_menus(
 			array(
 				'primary' => esc_html__( 'Primary Navigation', 'twentytwentyone' ),
+				'footer'  => __( 'Footer Navigation', 'twentytwentyone' ),
 			)
 		);
 

inc/menu-functions.php

@@ -35,3 +35,27 @@ function twenty_twenty_one_add_sub_menu_toggle( $output, $item, $depth, $args )
 	return $output;
 }
 add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_add_sub_menu_toggle', 10, 4 );
+
+
+/**
+ * Displays SVG icons in the footer navigation.
+ *
+ * @param string   $item_output The menu item's starting HTML output.
+ * @param WP_Post  $item        Menu item data object.
+ * @param int      $depth       Depth of the menu. Used for padding.
+ * @param stdClass $args        An object of wp_nav_menu() arguments.
+ * @return string The menu item output with social icon.
+ */
+function twenty_twenty_one_nav_menu_social_icons( $item_output, $item, $depth, $args ) {
+	// Change SVG icon inside social links menu if there is supported URL.
+	if ( 'footer' === $args->theme_location ) {
+		if ( ! empty( $svg ) ) {
+			$svg         = twenty_twenty_one_get_icon_svg( $item->url );
+			$item_output = str_replace( $args->link_after, '</span>' . $svg, $item_output );
+		}
+	}
+
+	return $item_output;
+}
+
+add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_nav_menu_social_icons', 10, 4 );