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%;
}

  1. You can adjust the value of the “top” position to the precise position you want.
  2. 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.
  3. 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.

Comments

Post a Comment

Popular posts from this blog

How To Create 3 Columns Widgetized Footer In Headway 3?

In Headway version 2 and above, you might need to go through a number of steps before you could achieve a 3-column widgetized footer for your website but in Headway version 3.1.2, it is much simpler now. Basically, you just need to add a widgetzed block and set it horizontally and you got it! See below steps for details.
Read more

Headway Visual Editor not Loading in the Browser

This is one of the most common problems found in Headway theme, i.e., many people faced the same problem while loading their Visual Editor (VE) - it would either took forever to load the visual editor (you see the loading icon circling continuously) or freeze with no reason. If you are having the same problem with your visual editor, you might want to check the following list first before downgrading to lower version of Headway.
Read more

How to Add a Static Home Page to a Blog?

If you have already have a blog but then decided to add in some static pages to make it look like a normal website. Can you do that? Or, you are thinking to move your blog from root directory to a new directory called “blog” and the default home page is a static page with no blog posts. Can you do that?
Read more