Appearance -> Menu -> Menu Structure : Add plain HTML code as an element

Question

I have the following Header Menu:

When you look on my wp-admin panel:

You can see that the last <li> element containing the images of the german and english flag was not inserted to the menu #TopHomeSitemapSearchLanguageSwitcher with the wordpress admin panel. I did this with JavaScript by adding it with JQuery to the <ul> with the #id #TopHomeSitemapSearchLanguageSwitcher.

My Question is, if I can add my plain HTML Code without JavaScript directly from Wordpress, like a plain HTML text box in the menu structure, so far I just can add a link to a page or to a custom URL, but not some plain HTML.

I have a child theme where I could add some PHP code too.

Answer 1

You can add your flag (plain) html into menu at last li tag.

<?php
function add_last_nav_item($items, $args) {
    if ($args->menu->slug == 'topbar-menu') { // change your menu slug name

        // Add your html
        $item = '<li class="searchbox"> 
                    <input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();" required>
                    <input type="submit" class="searchbox-submit" value="">
                    <span class="searchbox-icon"><i class="fa fa-search"></i></span>
                </li>';
        $items = $item.$items;
    }
  return $items;
}
add_filter( 'wp_nav_menu_items', 'add_last_nav_item', 10, 2 );
?>

Answer 2

In menu editor add Custom Link for each language with URL pointing to the site of your language and Link Text - <img src="url of your flag picture" alt="your language">