Add Sliding Header Search Row to any Oxygen Header

le 26/10/2021
JAG

In this members-only tutorial, we’ll look at implementing a simple header search in Oxygen. Clicking the search icon will reveal a search row underneath the header. This works great for headers that have lots of menu items and not much room for a search form.
Live Demo – Inspired by the search form at Webflow’s blog

Using a separate header row to store the search form is quite convenient as it makes it easy to use with sticky headers.
Also, even once the form is revealed, it still doesn’t make the header feel cramped as there is lots of space for the user to type their search term.
Using Oxygen’s Header Builder
We’ll stick to using Oxygen’s built-in solution for headers as then we get functionality such as sticky header out of the box. Also, it means we can apply this technique to existing headers made in Oxygen.
Let’s walk through it.
Add the Search Icon
We can add a search icon easily using Oxygen’s icon component. This is the element we’ll be using as the toggle to open up the search, we’ll give it a class ‘header-search-icon’. It can be placed anywhere inside a header builder.
Create a new Header Row
Adding a new header row is done easily by selecting the header builder and clicking ‘Add another row’. We’ll give the new header row a class of ‘search-row’ and give it a background colour and text colour.
Now we need to place a search form inside that row using the search form component and placing it inside row center. The final structure will need to look like this. The search row needs to come after the existing header rows.

It will currently look pretty ghastly at this point, but we’re just getting the structure in place.
Adding Placeholder Text to the Search Form
Next, we need to activate html5 support for search, so the search form has some placeholder text. This is done in WordPress by adding the following code snippet.

Note; If you’re already activating html5 support on your site either by code snippet or in a plugin, you can leave this step. eg if you’re using the Oxygen Essentials Plugin, which already includes this theme support.
add_theme_support( 'html5', array( 'search-form' ) );
We now have our placeholder. The default placeholder text in WordPress is just the word ‘search’. We can change this with a filter to whatever we like. Like in the Webflow example, let’s give our users a hint at search terms they can use. Here we are changing the text to Try Oxygen Builder or WordPress.
add_filter( 'get_search_form', 'lit_search_form_placeholder_text' );
function lit_search_form_placeholder_text( $html ) {

$html = str_replace( 'placeholder="Search ', 'placeholder="Try Oxygen Builder or WordPress', $html );

return $html;
}
Let’s add some styling
Here is the CSS we need to add to a custom stylesheet in Oxygen. This covers positioning the search form correctly, removing the padding so it’s in line with the other header elements, making screen reader text invisible and ensuring the placeholder text is correctly inheriting our site’s typography.
body:not(.oxygen-builder-body) .search-row {
display: none;
}

.header-search-icon {
cursor: pointer;
}

.search-row .oxy-search-form .search-form {
display: block;
}

.oxy-header .search-row .oxy-search-form {
width: 100%;
}

.search-row .oxy-search-form input {
background: none;
border: none;
color: inherit;
padding-left: 0;
padding-right: 0;
width: 100%;
}

.search-row .oxy-search-form input,
.search-row .oxy-search-form ::placeholder,
.search-row .oxy-search-form :-ms-input-placeholder,
.search-row .oxy-search-form ::-ms-input-placeholder {
color: #fff;
opacity: 1;
}

.search-row input::placeholder {
color: inherit;
font-family: inherit;
}

.search-row .oxy-search-form input:focus {
border: none;
outline: none;
}

.search-row .oxy-search-form input[type=submit] {
display: none;
}

.search-row .oxy-search-form input[type=submit]:hover {
background-color: #000;
}

.search-row .oxy-header-left:empty {
display: none;
}

.search-active .search-icon {
pointer-events: none;
}

.search-row .screen-reader-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
At this point, the search row is hidden away on the front end, but still visible to us inside the builder. This makes it easy to tweak the styles of the typography & colours to make sure it looks good before we make it work on the site.
Creating the Search Toggle
The final step is to add the jQuery to our search icon to make it work as a toggle to open up the search on the front end. This needs to be added to the search icon itself in advanced > JS.
jQuery(document).ready(function($) {

"use strict";

if ($ ('html'). attr ('ng-app') == 'CTFrontendBuilder') return;

const searchToggle = $('#%%ELEMENT_ID%%'),
searchRow = searchToggle.closest('.oxy-header-row').next('.search-row'),
searchInput = searchRow.find('input[type="search"]');

// Make search toggle icon focusable
searchToggle.attr('tabindex', '0');

// Escape key can be used to exit search
searchInput.keyup(function(e){
if(e.keyCode == 27) {
hideSearch();
}
});

// Allow users to access via keyboard
searchToggle.keyup(function(e){
if(e.keyCode == 13) {
showSearch();
}
});

// Tabbing out of the search bar will close search.
searchInput.on('keydown', function (event) {

if (event.keyCode === 9) {
hideSearch(event.target);
}

});

searchToggle.off('click');
searchToggle.click(function() {

if (searchToggle.closest('.oxy-header-row').hasClass('search-active')) {
hideSearch();
} else {
showSearch();
}

});

// Helper function to show the search form.
function showSearch() {

searchRow.slideDown('300');
setTimeout(
function() {
searchInput.focus();
}, 300);
searchToggle.closest('.oxy-header-row').addClass('search-active');

}

// Helper function to hide the search form.
function hideSearch() {

searchRow.slideUp('300');
searchToggle.closest('.oxy-header-row').removeClass('search-active');

}

});
This jQuery takes care of a few important things;
The search icon now opens / closes the search header row.The search icon is now focusable via keyboard.The search row will close if the user presses ESC or tabs out of the input.
All done
I think this is a great solution for a header search that doesn’t take up too much space in the header, is easy to use for the user and accessible for keyboard users.

Nos experts se tiennent à votre disposition
pour répondre à vos questions et vous conseiller
dans votre projet digital.

Vous souhaitez développer une application ?

Envie d’échanger avec l’un de nos experts ? Besoin d’en savoir plus ?
En savoir plus

Recevez notre newsletter

La protection des données nous tient à cœur. JAG utilise les informations que vous fournissez afin de vous proposer des informations et du contenu pertinent sur nos produits et services. Vous pouvez vous désinscrire de ce type de communications à tout moment. Pour plus d'informations, consultez notre politique de confidentialité
© 2022 JAG Consulting, sas. Tous droits réservés.
© 2022 JAG Consulting, sas. Tous droits réservés.
4.8
Lire les 51 avis
google
Brieuc Pauly
08/09/2022

Créative, dynamique et très professionnelle, c'est à mon sens les piliers qui soutiennent cette équipe talentueuse ! Une agence à taille humaine qui privilégie la qualité et le résultat. Alors si vous souhaitez le meilleur pour votre communication adressez vous les yeux fermés à ces passionnés, plus que compétents ! (Translated by Google) Creative, dynamic and very professional, these are in my opinion the pillars that support this talented team! A human-sized agency that favors quality and results. So if you want the best for your communication, turn your eyes closed to these enthusiasts, who are more than competent!

google
Amaury Tardier
08/09/2022

Merci à Julien et son équipe, plus que satisfait par le travail fourni ! Je recommande vivement ! (Translated by Google) Thanks to Julien and his team, more than satisfied with the work provided! I highly recommend !

Ravi de travailler avec l'équipe JAG pour la gestion de mon site de e-Commerce. Equipe réactive et toujours pleine de bonnes idées pour améliorer les performances du site (Translated by Google) Glad to work with the JAG team for the management of my e-Commerce site. Responsive team always full of good ideas to improve the performance of the site

Merci à Julien pour son accompagnement dans mon projet, je recommande à 200% c est le Top (Translated by Google) Thanks to Julien for his support in my project, I recommend 200% it is the top

Excellente agence. Equipe est très pro, à l'écoute et de bon conseils. (Translated by Google) Excellent agency. The team is very professional, attentive and gives good advice.

Temps de réponse hors pair quand il y a eu un pb sur mon site, je vous recommande chaleureusement Julien :-) (Translated by Google) Unparalleled response time when there was a problem on my site, I warmly recommend Julien :-)

Charger plus
listarrow-right
Julien

Julien

Votre conseiller

I will be back soon

Une question ?

Julien
Bonjour ! Je suis Julien.
Comment puis-je vous aider?
Démarrer la conversation:
chat Live Chat