Looking to move your Search field into a Section on select pages?

To do this, you'll need to add some custom JavaScript, as well as a bit of custom CSS.

(See Add CSS and JavaScript for more on adding custom files with the Brand Designer.) 

  1. Use the Section Designer to add search-custom as a class to your desired section.

  2. Add JavaScript to move the search to that section on your page:
    • Add the following to a script file in your brand:
    • Example search-custom.js
      AJS.toInit( function ($) {

      Want to include other content in your section but have the search stay at the top? Just change the word "append" to "prepend" in the script above.

  3. Add CSS to style the moved Search:
    • Add the following to a CSS file in your brand, adjusting the width settings to what makes sense for your placement.
Example search-custom.css
/*Custom Search*/
.search-custom #search {
  position: relative;
  float: none;
  top: 0;
  left: 0;
  width: 200px;
  padding: 6px;
  margin: 0 auto !important;
.zen-bin.search-custom {
  overflow: visible;
  *overflow: visible;
.search-custom ol li {
  list-style-type: none;
  padding-right: 12px;
.search-custom #search .quick-nav-drop-down {
  position: relative;
  top: 8px;
  left: 0px;
.search-custom #search #quick-search-query {
  border: none;
  width: 200px;


Then Apply your brand changes, and your search field should appear in the desired section.

#trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))