Resource icon

Google Custom Search in Header

Amin Sabet

Well-known member
Amin Sabet submitted a new resource:

Google Custom Search in Header - Put a small Google Custom Search Bar in your header

It took me a long time to get this how I wanted it, so I figured I'd post instructions here in case anyone was trying to do the same thing.

What I wanted was a small Google Custom Search bar in my header that would fit there without displacing my logo on any common display type (phone, tablet, desktop). I wanted this to supplement XenForo's search, not to replace it.

Please note that my settings are designed to work well with an 80px wide by 65px high small logo. If you use a bigger...

Read more about this resource...

Dan Hawkins

Active member
Thanks for this, is there a way to hide the search box in responsive view?
The way to do this would be to place the code inside a div

<div class="no_mob_display">

Then in the style sheet (EXTRA.CSS) add

@media screen and(max-width:600px){
  .no_mob_display {
    visibility: hidden;
    clear: both;
    float: left;
    display: none;


Well-known member
I put this into the ad_header template, don't know if it's the right way to do it but it works for me. :p

<xen:hook name="ad_header" />
<style type="text/css">
.topbanner {
float: right;
margin-top: 20px;
padding: 5px;
width: 75%;
max-width: 320px;
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
.topbanner {
  display: none;

<div class="topbanner">
*** google stuff