Search Bar Position

Hi, I added a search bar to my menu but it appears on top of my menu instead of next to it. I need the search bar to display next to the menu aligned to the right and the menu items to be displayed in the center next to it. So it would all be in one row, Logo first, menu items next to it and then the search bar. Anyone know a solution for this?
Also, I would like to reduce the size of the search bar and button?

can you post your site url?

oops sorry, here it is


the search bar are displayed once when page loaded but then disappear.
Did you add the search bar from child theme? if so, I think you put the code in wrong position.

Open your header.php within your child theme then add your search bar and edit some script following this screenshot

Thanks a lot for the detailed code, it worked but the position is slightly higher, can you tell me how I can make it leveled with the menu items so it’s a little lower so it’s inline?
Also, is there a way I can reduce the size of the Search box and button so they are skinnier, want to fix the height and width?

Please take a look at your other topic. I posted a solution to the vertical alignment.

Thanks, I tried that and replied to the other thread. Will mark this one resolved since don’t want duplicate topics.

Search bar is still above the menu item, not in line with nav items.

Rogercw, please take a look at this site: -

Check out the search in the main menu.
Another easy option would be that you put the search widget in the footer and link the search icon in the main menu with the bottom search. That means when you click on the icon it will scroll down to the footer and there is the search bar then.

@rogercw you can follow the instruction from @WeAreOne to move your search bar to the bottom instead. But if you still want to put the search bar inline with top menu, you can add this css code then:

@media screen and (min-width: 600px){
  .header-search {
    margin-top: 0px !important;

Thank you @WeAreOne and @Awan, I will try these options and let you know the results. Also, could you please take a look at my questions in the post below, I would really appreciate it:

  1. Using the code above worked perfectly. Thanks @Awan. I would also like to have the search box and button size a bit smaller than what it is right now, it is too big right now. Any solution for that?

@media screen and (min-width: 600px){
.header-search {
margin-top: 0px !important;

  1. Still wondering about solutions to the post below:
  1. Just give them a width and a height. You can find out the code easily with using the firefox or chrome web developer. {
  width: 125px !important;
  height: 30px !important;
} {
  width: auto !important;
  height: auto !important;
  paddint: 2.5px !important;

The padding at the submit button is important to change because with this the height and width is defined.

  1. I try to take a look every evening (in Germany) at your topic. I am working the rest of the day and don’t have time to do it in between. It really take up to 30 minutes to answer all questions from you.
  1. That worked perfectly, thank you @WeAreOne

Hi Awan @Awan, not sure if you have some time to look into this, I would appreciate any input:

  1. I am trying to make the Gallery page appear left to right to cover the whole page like this, see example on this page:
  2. The slider images on the mobile site are extremely stretched, is there a way to fix this?
  3. There is some extra white space below the slider on the homepage, is there a way to eliminate this space? Not sure if it is the height of the images causing it? They were all 1920×1280 size when I uploaded them, not sure if they were compressed further when I uploaded them to Media Gallery and Lightbox? Can you take a look please?