How to move the quick search bar to your header in Xenforo

Today we are going to learn how to move our quick search bar to our header. What is the quick search bar you ask? Well if you look at the image below you will see that I have highlighted it for you:


This is just a option but if you like having more control of how things look on your forums this could be a great idea! Always keep in mind that you might have to play with the CSS in the code I am showing you. It will default the way the search box looks to the original theme for Xenforo. So you are going to have to play with it. I would also like to mention that I didn’t write the CSS for this either and I don’t take any credit for the creation of this. I am just simply showing you how to use it.

So let’s get too it. We are going to navigate back to our Extras.css page. If you don’t know how to get to this you can always check out a pervious tutorial that I posted regarding how to access this here.

This is what it looks like:


Now this is the code you are going to put in. Make sure that you put it after anything you have put there. The code is as following:

/* START - QuickSearch in Header */
#QuickSearch {
top: -103px;
background-color: transparent;
} {
background: #176093; /* Old browsers */
background: -moz-linear-gradient(top,  #176093 0%, #60abf8 39%, #ffffff 80%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#176093), color-stop(39%,#60abf8), color-stop(80%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #176093 0%,#60abf8 39%,#ffffff 80%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #176093 0%,#60abf8 39%,#ffffff 80%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #176093 0%,#60abf8 39%,#ffffff 80%); /* IE10+ */
background: linear-gradient(to bottom,  #176093 0%,#60abf8 39%,#ffffff 80%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#176093', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
.formPopup {
    background-color: transparent;

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
    .Responsive #QuickSearch
        top: -18px;
/* END - QuickSearch in Header */

Once you put it in it will look like this:


So click save at the bottom and navigate to your home page and you will see this:


There ya have it! Quite simple I have to admit. Again make sure you edit the code to reflect your style colors so that it flows nicely.

If you have any questions please feel free to ask away!

Looking for quality XenForo hosting? Check out Arvixe Web Solutions

Tags: , , , , , , , , , | Posted under XenForo | RSS 2.0

Author Spotlight

Keith Pottratz

Hello My Name is Keith Pottratz. I have been working with computers for over a decade. It's my personal hobby something that I love and enjoy doing. I went to school for Computer Science, and have spent many years self teaching my self various things. I have ton's of experience in HTML,CSS, PHPBB,CPanel,CMS software, blogging software and various other systems and enviroments. My favorite thing to do though is backend developing. I find it to be a growing and ever evolving beast and I love learning about it. I look forward to giving as much knowledge as I can and help.

Leave a Reply

Your email address will not be published. Required fields are marked *