Searchform & Login/Profile in navbar like on this site

Archives rtPanel
#1

Hi! I want make searchform and login like on this site. Tring to find plugins or sthng else.
How to?

#2

Hello Igor,

For searchform: Its just CSS and jQuery, you can copy it.

For Social login you can use WordPress Social Login

#3

But. I spent whole night to find CSS and jQuery for this search form. I can’t find it.
As I understand it use:
jQuery v1.11.0, * Custom Child Scripts, foundation.js
and for css:

.rtp-search-slide {  
    margin-top: 5px;  
    position: relative  
}  
.rtp-search-slide .rtp-search-form-wrapper {  
    overflow: hidden;  
    position: relative  
}  
.rtp-search-slide .rtp-search-form-wrapper:after {  
    color: #fff;  
    content: '\e839';  
    display: block;  
    font-family: "fontello";  
    font-size: 1rem;  
    font-weight: normal;  
    height: 30px;  
    position: absolute;  
    right: 0;  
    text-align: center;  
    top: 0;  
    width: 40px;  
    z-index: 5  
}  
.rtp-search-slide .rtp-search-form-wrapper .rtp-search-input {  
    background: transparent;  
    border: 0;  
    color: transparent;  
    cursor: pointer;  
    font-size: 0.875rem;  
    height: 30px;  
    line-height: 1;  
    padding: 0 1.875rem 0 0.625rem;  
    position: relative;  
    z-index: 10  
}  
.rtp-search-slide .rtp-search-form-wrapper .rtp-search-input:focus {  
    width: 12.5rem  
}  
.rtp-search-slide .rtp-search-form-wrapper .rtp-search-input:focus+.searchsubmit {  
    display: block  
}  
.rtp-search-slide .rtp-search-form-wrapper .searchsubmit {  
    display: none;  
    height: 30px;  
    right: 0;  
    width: 30px  
}  
.rtp-search-slide .searchform {  
    transition: all 0.15s linear 0s;  
    position: absolute;  
    right: 0;  
    width: 40px  
}  
.rtp-search-slide .rtp-open-search {  
    background: #fff;  
    -moz-border-radius: 1000px;  
    -webkit-border-radius: 1000px;  
    border-radius: 1000px;  
    width: 12.5rem  
}  
.rtp-search-slide .rtp-open-search .rtp-search-form-wrapper:after {  
    color: #3475ba  
}  
.rtp-search-slide .rtp-open-search .rtp-search-form-wrapper .rtp-search-input {  
    color: inherit;  
    cursor: text  
}  
.rtp-search-form-wrapper .rtp-search-input {  
    float: left;  
    margin: 0;  
    width: 68%  
}  
.rtp-search-form-wrapper .searchsubmit {  
    margin: 0  
}  
.rtp-header .rtp-search-button {  
    opacity: 0;  
    position: absolute;  
    right: 10px;  
    width: 40px;  
    z-index: 10  
}  
.searchform {  
    margin: 0  
}
#4

Okay, Check the following urls:
http://tympanus.net/Tutorials/ExpandingSearchBar/

#5

Wow! That’s what I need! Thanks!

#6

You are welcome :slight_smile:

#7