Fix: Remove redundant wrapping <div> from wp_nav_menu() output [ED-14551]

[rami-elementor]

In the theme’s header/footer, we show the menu using the wp_nav_menu() function:

Currently, all the header/footer menus which use wp_nav_menu() render the following code:

<nav class="site-navigation">
	<?php
	wp_nav_menu( [
		'theme_location' => 'menu-1',
		'fallback_cb' => false,
		'echo' => false,
	] );
	?>
</nav>

The generated code:

<nav class="site-navigation">
	<div class="menu-header-links-container">   <!-- This div is redundant -->
		<ul id="menu-header-links" class="menu">
			<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-27"><a href="http:https://dev.local/">Home</a></li>
			<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http:https://dev.local/blog/">Blog</a></li>
			<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http:https://dev.local/page-title/">Page Title</a></li>
		</ul>
	</div>   <!-- This div is redundant -->
</nav>

The issues is that we get a redundant wrapping <div> element that has no styling and adds nothing to the page. It only increases the DOM size.

We can optimize this, remove the <div> element, and clean the markup to output the following:

<nav class="site-navigation">
	<ul id="menu-header-links" class="menu">
		<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-27"><a href="http:https://dev.local/">Home</a></li>
		<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http:https://dev.local/blog/">Blog</a></li>
		<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http:https://dev.local/page-title/">Page Title</a></li>
	</ul>
</nav>