CODEWITHSUNDEEP
jqueryhtmlcss
supersize
supersize

Reputation: 14773

Turn navbar into full width searchbar via CSS or jQuery

I found this pretty neat theme where the navbar turns into a full-width searchbar when clicking the magnifier icon. I was wondering how I could realise this. My attempt was to create an overlay input field and style it. But I assume there is something like a plugin or tutorial for it.

Any help would be much appreciated.

Upvotes: 0

Views: 183

Answers (1)

Jamie Wade
Jamie Wade

Reputation: 277

This is quite easy to do yourself without the need of a plugin.

I assume you are quite comfortable with HTML and CSS so I will summarise, but firstly I would create a DIV that is the same height as your header section, and CSS position it above the header.

Of course, inside this DIV you would put the search form.

Give the div 0 opacity and add CSS transitions:

div.search {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

When the page loads, the search bar will not be visible because we have set opacity: 0; However, using Javascript, we can add a show class to the search bar which will fade it in, and we can trigger this when a user clicks on something:

$('.search-trigger').click(function() {
    $('div.search').addClass('show');    
});

We would style the show class like this:

div.search.show {
    opacity: 1;
}

Hope this helps.

Upvotes: 1

Related Questions