How to Move the Search Bar to the Top of the Header

Have you thought of moving the search bar to the top of the header so that your navigation bar has more spaces for your navigation items. If yes, add the following CSS code to your custom.css file.

1. Log into your wordpress dashboard.
2. Go to Appearance > Editor.
3. On the right hand side, under “Styles”, click on custom.css.
4. Insert the below CSS code into custom.css and click on the green button “Update Files” at the bottom to save.

/*relocate search bar to the top of the header*/

body.custom form#header-search-bar input {

            display:block;

            height: 14px;

            line-height: 14px;

            position: absolute;

            top: -280%;

            width: 20%;

}

5. You can adjust the value of the “top” position to the precise position you want.
6. After the above code is added, you might find the last navigation item falls to the next line which make the navigation bar looks really ugly.
7. Don’t worry! You can always bring it back by adding the following CSS code in the custom.css file.

/*make the navigation to be in one line*/

body.custom ul.navigation { width: 110%; }

Once the CSS code is inserted, you will see the navigation bar will go back into one line.  

There may be other ways to move the search bar to the top of the header, if you have other methods, please share it in the comment.