Reputation: 3217
I am working on a site here: http://www.estiponagroup.com/dev/
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://www.estiponagroup.com/dev" 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="https://www.facebook.com/estiponagroup"><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://www.estiponagroup.com/dev/">Home</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646">
<a href="http://www.estiponagroup.com/dev/our-work/">Our Work</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647">
<a href="http://www.estiponagroup.com/dev/our-services/">Our Services</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648">
<a href="http://www.estiponagroup.com/dev/our-team/">Our Team</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-649">
<a href="http://www.estiponagroup.com/dev/our-story/">Our Story</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-650">
<a href="http://www.estiponagroup.com/dev/news/">News</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-651">
<a href="http://www.estiponagroup.com/dev/our-fans/">Our Fans</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-652">
<a href="http://www.estiponagroup.com/dev/contact/">Contact Us</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="search-main-nav clear">
<form action="http://www.estiponagroup.com/dev/" 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://www.estiponagroup.com/dev/" 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>
Upvotes: 1
Views: 3756
Reputation: 16705
The problem is the pointer-events: none;
style declaration on .main-header
.
pointer-events: none;
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
.main-header {
padding-top: 50px;
padding-bottom: 50px;
position: relative;
z-index: 1000;
pointer-events: none; /* <-- remove this */
/* ... */
}
Or add pointer-events: all
to your input:
.search-main-nav input {
border: 2px solid #333;
color: #333;
pointer-events: all; /* <-- add this */
z-index: 999;
}
Upvotes: 3