CODEWITHSUNDEEP
htmlcsswordpresssearch
MattM
MattM

Reputation: 3217

Cannot focus on input element with mouse click

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

Answers (1)

Kevin Boucher
Kevin Boucher

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

Related Questions