search

elementor / hello-theme

A plain-vanilla theme, best suited for building your site using Elementor plugin. This theme resets the environment and prepares it for smooth operation of Elementor.
https://elementor.com/hello-theme/
572 stars 225 forks source link

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

Closed rami-elementor closed 5 months ago

rami-elementor commented 5 months ago

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://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://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://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://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://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://dev.local/page-title/">Page Title</a></li>
    </ul>
</nav>