Move Search Icon to Top Header Menu

Hi,

You have to delete the code for Search Icon from menu-header.php file like this : http://screencast.com/t/qbBLGt6x
and into the menu-top.php file you have to add this code like this: http://screencast.com/t/cao8imbu8q3
And you also have to change the name of the class from “span9” to “span8” like shown in the printscreen.

<!-- Search -->
            <div class="span1">
                <div class="dropdown header-search">
                    <a id="search-button" href="#" role="button" class="dropdown-toggle " data-toggle="dropdown"><span class="td-sp td-sp-ico-search"></span></a>
                    <div class="dropdown-menu" aria-labelledby="search-button">
                        <form role="search" method="get" class="td-search-form" action="<?php echo home_url( '/' ); ?>">
                            <div class="td-head-form-search-wrap">
                                <input class="needsclick" id="td-header-search" type="text" value="<?php echo get_search_query(); ?>" name="s" autocomplete="off" /><input class="wpb_button wpb_btn-inverse btn" type="submit" id="td-header-search-top" value="<?php _etd('Search')?>" />
                            </div>
                        </form>
                        <div id="td-aj-search"></div>
                    </div>
                </div>
            </div>

You will get this result: http://screencast.com/t/NK81ivEzu.

Now to style it simply add this custom CSS in the Custom CSS in Theme Panel:

div.header-search {
display: inline;
float: right;
}
#search-button .td-sp{
background-image: url('http://localhost/wordpress/wp-content/themes/Newspaper/images/header/elements-menu.png')!important;
background-repeat: no-repeat;
}
.td-sp-ico-search{
width: 25px;
height: 25px;
background-position: -20px -544px;
}

Result here: http://screencast.com/t/WW0j2lV6Ek.

Thank you

Hi,

The menu is made using script and all the css for it it’s compressed so it’s not an easy task to modify it and you need custom work, unfortunately we cannot offer custom work as we work hard on the development, updates, fixes and support.
You can always get a freelancer from sites like: http://studio.envato.com/ if you don’t know how to do it yourself.

Thnaks