Toggle search layer over other icons

Question

I have recently moved over from blogger to wordpress, so I'm very much a newbie, but trying very hard to learn.

I want to have a toggle search in my top right corner next to some social icons. What I want is for just a search icon to show, but when it's clicked it expands to show a search field. So far I've managed that, but the problem is that when the search field expands, it pushes the social icons left. I would rather the search field overlap the social icons, hiding them temporarily. Something like this: http://www.thecoveteur.com

So far I have:

----HTML-----
    <div>
    <ul class="social">
       <li class="facebook">
          <a href="">
             <strong>FACEBOOK</strong>
          </a>
       </li>
       <li class="twitter">
          <a href="">
             <strong>TWITTER</strong>
          </a>
       </li>
    <li class="pinterest">
          <a href="">
             <strong>PINTEREST</strong>
          </a>
       </li>
       <li class="instagram">
          <a href="">
             <strong>INSTAGRAM</strong>
          </a>
       </li>
       <li class="bloglovin">
          <a href="">
             <strong>BLOGLOVIN'</strong>
          </a>
       </li>
    <li>
    <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
        <label>
            <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
        </label>
    </form>
    </li>
    </ul>
    </div>
   ----CSS----- 
    .social { 
    list-style:none; 
    margin-bottom:10px;
    }
    .social li { 
    display:inline; 
    float:left; 
    }
    .social li a { display:block; width:24px; height:24px; padding-right:50px; position:relative; }
    .social li a strong { 
    position:absolute; 
    left:50%;
    margin-left:-90%;
    margin-top:30px;
       font-family:'questrialregular';
    text-transform:uppercase;
    font-weight:100;
    font-size:12px;
    }

    li.facebook { background-image:url("http://3.bp.blogspot.com/-dG3Uh5wbbkc/UrbakrftBVI/AAAAAAAADe0/Nyk_oAJrz7o/s1600/facebook.png"); background-repeat:no-repeat; }
    li.twitter { background-image:url("http://4.bp.blogspot.com/-Ub-33u2lfa4/UrbalXBwDQI/AAAAAAAADfA/wzp9y9g9Zts/s1600/twitter2.png"); background-repeat:no-repeat; }
    li.instagram { background-image:url("http://4.bp.blogspot.com/-7n7d_7AueXo/UqV-qJxyw4I/AAAAAAAADaA/hOUqalWGy40/s1600/instagram.png"); background-repeat:no-repeat; }
    li.pinterest { background-image:url("http://1.bp.blogspot.com/-w0LN-WnpsNc/UrbakgTnOkI/AAAAAAAADe4/vZpW7wi4ZMY/s1600/pinterest2.png"); background-repeat:no-repeat; }
    li.bloglovin { background-image:url("http://3.bp.blogspot.com/-t9T07aBtYhQ/UqV-p7oZ1vI/AAAAAAAADZ4/dxY8FhqL48E/s1600/bloglovin.png"); background-repeat:no-repeat; }

    .social:hover li { opacity:1; }

    .social li { transition-property: opacity; transition-duration: 500ms; }
    .social li a strong { opacity:0;
     transition-property: opacity; transition-duration: 300ms;
    }

    .social li:hover { opacity:0.7; }
    .social li:hover a strong { opacity:1; /*top:-10px;*/ }

    .search-form {
        position: relative;
        /*right: 200px;
        top: 200px;*/
        color:#000;
    }

    .search-field {
        background-color: transparent;
        background-image: url("http://4.bp.blogspot.com/-FlxbQrrwMzg/UpsuqWwMWbI/AAAAAAAADYY/BT5hA_2R3MQ/s1600/search_icon.png'");
        background-position: left;
        background-repeat: no-repeat;
        background-size: 24px 24px;
        border: none;
        cursor: pointer;
        height: 25px;
        margin: 0px 0;
        padding: 0px 0 0 34px;
        position: relative;
        -webkit-transition: width 400ms ease, background 400ms ease;
        transition:         width 400ms ease, background 400ms ease;
        width: 0;
        text-transform:uppercase;
        font-family:'karlaregular';
        font-size:12px;
        color:#000;

    }

    .search-field:focus {
        background-color: #fff;
        border-bottom: 1px solid #000;
        cursor: text;
        outline: 0;
        width: 230px;
        position:relative;
        height: 25px;
        text-transform:uppercase;
        font-family:'karlaregular';
        font-size:12px;
        color:#000;
    }
    .searchform
    .search-submit { 
    display:none;
    }

    .button{
        display:none;
    }

I'm sure there's a really simple solution to this (z-index?), but I can't find it...

Any help would be greatly appreciated.

Answer 1

Please check this link and let me know this is what you looking for?

Html

<div>
        <ul class="social">
       <li class="facebook">
          <a href="">
             <strong>FACEBOOK</strong>
          </a>
       </li>
       <li class="twitter">
          <a href="">
             <strong>TWITTER</strong>
          </a>
       </li>
    <li class="pinterest">
          <a href="">
             <strong>PINTEREST</strong>
          </a>
       </li>
       <li class="instagram">
          <a href="">
             <strong>INSTAGRAM</strong>
          </a>
       </li>
       <li class="bloglovin">
          <a href="">
             <strong>BLOGLOVIN'</strong>
          </a>
       </li>
    <li>
    <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
        <label>
            <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
        </label>
    </form>
    </li>
    </ul>
    </div>

CSS

.social {
    list-style: none;
    margin-bottom: 10px;
}
.social li {
    display: inline;
    float: left;
}
.social li a {
    display: block;
    width: 24px;
    height: 24px;
    padding-right: 50px;
    position: relative;
}
.social li a strong {
    position: absolute;
    left: 50%;
    margin-left: -90%;
    margin-top: 30px;
    font-family:'questrialregular';
    text-transform: uppercase;
    font-weight: 100;
    font-size: 12px;
}
li.facebook {
    background-image: url("http://3.bp.blogspot.com/-dG3Uh5wbbkc/UrbakrftBVI/AAAAAAAADe0/Nyk_oAJrz7o/s1600/facebook.png");
    background-repeat: no-repeat;
}
li.twitter {
    background-image: url("http://4.bp.blogspot.com/-Ub-33u2lfa4/UrbalXBwDQI/AAAAAAAADfA/wzp9y9g9Zts/s1600/twitter2.png");
    background-repeat: no-repeat;
}
li.instagram {
    background-image: url("http://4.bp.blogspot.com/-7n7d_7AueXo/UqV-qJxyw4I/AAAAAAAADaA/hOUqalWGy40/s1600/instagram.png");
    background-repeat: no-repeat;
}
li.pinterest {
    background-image: url("http://1.bp.blogspot.com/-w0LN-WnpsNc/UrbakgTnOkI/AAAAAAAADe4/vZpW7wi4ZMY/s1600/pinterest2.png");
    background-repeat: no-repeat;
}
li.bloglovin {
    background-image: url("http://3.bp.blogspot.com/-t9T07aBtYhQ/UqV-p7oZ1vI/AAAAAAAADZ4/dxY8FhqL48E/s1600/bloglovin.png");
    background-repeat: no-repeat;
}
.social:hover li {
    opacity: 1;
}
.social li {
    transition-property: opacity;
    transition-duration: 500ms;
}
.social li a strong {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 300ms;
}
.social li:hover {
    opacity: 0.7;
}
.social li:hover a strong {
    opacity: 1;
    /*top:-10px;*/
}
.search-form {
    position: relative;
    /*right: 200px;
top: 200px;*/
    color: #000;
}
.search-field {
background-color: transparent;
background-image: url("http://4.bp.blogspot.com/-FlxbQrrwMzg/UpsuqWwMWbI/AAAAAAAADYY/BT5hA_2R3MQ/s1600/search_icon.png'");
background-position: right;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 25px;
margin: 0px 0;
padding: 0px 0 0 34px;
position: absolute;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
text-transform: uppercase;
font-family: 'karlaregular';
font-size: 12px;
color: #000;
right:0;
}
.search-field:focus {
    background-color: #fff;
    border-bottom: 1px solid #000;
    cursor: text;
    outline: 0;
    width: 230px;
    position: absolute;
    height: 25px;
    text-transform: uppercase;
    font-family:'karlaregular';
    font-size: 12px;
    color: #000;
    right:0;
}
.searchform .search-submit {
    display: none;
}
.button {
    display: none;
}
form{padding:0; margin:0;}