# Pavilion Header Search Theme Component

**URL:** https://meta.discourse.org/t/pavilion-header-search-theme-component/67959
**Category:** Theme component
**Tags:** pavilion, broken
**Created:** [August 13, 2017, 9:43am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959 "2017-08-13T09:43:48Z")
**Posts on this page:** 1
**Showing post:** 9

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [November 22, 2017, 3:38am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/9 "2017-11-22T03:38:20Z")

</div>

A little late, but here’s the css if you want the search bar to appear on the right of the header instead of the left. Add it in Admin \> Customize.

```plaintext
.header-search-enabled .contents {
   display: flex;
   justify-content: space-between;
    
   &:before, &:after {
     display: none;
   }
    
   .title {
     flex: 1 1 auto;
   }
    
   .search-header {
     float: right;
     margin-left: 0;
     margin-right: 10px;
   }
    
   .search-input {
     float: right;
     margin-left: 10px;
     margin-right: 0;
   }
    
   .search-context {
     padding-top: 5px;
     float: right;
   }

   .results {
     right: 0;
   }
}

```

You’ll, need to update to the latest for it to work properly.

[https://github.com/angusmcleod/discourse-header-search-theme/commit/c65ee64071ef70c46654270bce7ff79bd2fc8850](https://github.com/angusmcleod/discourse-header-search-theme/commit/c65ee64071ef70c46654270bce7ff79bd2fc8850)

The same CSS will also work for the Header Search Plugin.

See e.g. [https://discourse.angusmcleod.com.au/](https://discourse.angusmcleod.com.au/)

 ![04 AM](https://global.discourse-cdn.com/meta/original/3X/2/c/2c1410df97c8ee91f668586b6fdbafa272caa9a4.png)

---

_[View the full topic](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959)._