I have below code.The <form> tags are duplicate.When I remove one of them, input doesn't work.I confused.Why it happens?

Live web : https://cutt.ly/sEUKj5z

On header, click search icon.Input will appear with javascript.

<form role="search" method="get" class="searchform group"  style="display: none; width:101%!important" action="<?php echo home_url( '/' ); ?>" >
                <input type="search" placeholder=" <?php echo esc_attr_x( 'Search', 'placeholder' ) ?>"
                       value="<?php echo get_search_query() ?>" name="s"
                       id="search-input"
                       title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
                </form>
                <style>
                    .search {display: inline-block} /* prevent 100% width */
                    .search .fa-search {left: auto; right: 10px;}
                </style>
                <form role="search" method="get" class="searchform group"  style="display: none; width:101%!important" action="<?php echo home_url( '/' ); ?>" >
                <input type="search" placeholder=" <?php echo esc_attr_x( 'Search', 'placeholder' ) ?>"
                       value="<?php echo get_search_query() ?>" name="s"
                       id="search-input"
                       title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
                </form>
                <style>
                    .search {display: inline-block} /* prevent 100% width */
                    .search .fa-search {left: auto; right: 10px;}
                </style>

CodePudding user response：

I'm going on a limb here and guess that by "doesn't work" you mean you don't see the input field after removing the second form.

The reason is that the navigation bar has a negative top margin that pushes it up, apparently to hide the duplicate form, so when the second form is removed, it covers the remaining one.

To solve this, go to the #sticky-header-navbar > div > nav selector and remove the line margin-top: -45px;.