jeudi 13 août 2015

Search box inaccessible in wordpress header

I am working on a site here: http://ift.tt/1UG5ds2

I actually want the search box to appear below the navigation menu but when I place it there I can't click in the box to perform a search.

I added the same search field outside of the header to test that it works and it does.

I can't figure out why the search in the header area doesn't work. I have tried adding a z-index to the search div but it didn't work.

CSS:

.search-main-nav {
    float:right;
    width: 200px;
    z-index:999;
}
.search-main-nav input{
    border:2px solid #333;
    color:#333;
}
.search-main-nav label {
    color:#333;
    margin-left: -25px
}
.clear {clear:both;}

HTML (the 2 search functions are at the bottom above and below the </header> code:

<div class="wrapper" id="main-wrapper">

        <header class="main-header menu-type-standard-menu">
    <div class="container">

        <div class="logo-and-menu-container">

            <div class="logo-column">
                <style>.logo-image { width: 78px; }</style><a href="http://ift.tt/1h7TNiG" class="header-logo logo-image">
    <img src="//www.estiponagroup.com/dev/wp-content/uploads/2015/08/eg-logo.png" width="78" height="62" alt="logo" />
</a>            </div>
            <div class="social-links">
                <a class="facebook" target="_blank" href="http://ift.tt/1UG5ds4"><i class="icon fa fa-facebook"></i></a>
            </div>

            <div class="menu-column">
                                <div class="standard-menu-container  menu-skin-main reveal-from-top">

                        <a class="menu-bar menu-skin-main hidden-md hidden-lg" href="#">
                            <span class="ham"></span>
                        </a>


                        <nav><ul id="menu-main-nav-1" class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-631 current_page_item menu-item-645"><a href="http://ift.tt/1UG5ds2">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="http://ift.tt/1h7TMLB">Our Work</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647"><a href="http://ift.tt/1UG5ds6">Our Services</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648"><a href="http://ift.tt/1UG5fQK">Our Team</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-649"><a href="http://ift.tt/1h7TMLF">Our Story</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-650"><a href="http://ift.tt/1UG5fQO">News</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-651"><a href="http://ift.tt/1UG5fQQ">Our Fans</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-652"><a href="http://ift.tt/1h7TN27">Contact Us</a></li>
</ul></nav>
                    </div>

            </div>
        </div>


                    <div class="search-main-nav clear">
                                <form action="http://ift.tt/1UG5ds2" class="search-form" method="get" role="search">
                    <input type="search" id="search_box" name="s" value="" placeholder="Search..." class="search-field">

                    <label for="search_mobile_inp">
                        <i class="fa fa-search"></i>
                    </label>

                    <!--<input type="submit" value="Go" class="search-submit">-->
                </form>
            </div>
    </div>

</header>


<div class="search-main-nav clear">
                                <form action="http://ift.tt/1UG5ds2" class="search-form" method="get" role="search">
                    <input type="search" id="search_box" name="s" value="" placeholder="Search..." class="search-field">

                    <label for="search_mobile_inp">
                        <i class="fa fa-search"></i>
                    </label>

                    <!--<input type="submit" value="Go" class="search-submit">-->
                </form>
            </div>



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire