Search bar in main menu not displaying correctly

Hello,

I tried to add a 3rd party search widget in the menu but it is not displaying correctly. The "search" button is pushed below the search bar and onto the slideshow below. How can I modify this to appear on the same line? I tried using the default search widget and placed it in the header but it was pushed between the menu bar and the slide show below it, leaving a gap between the 2 sections. If someone can show me a simple fix or a way to modify it through CSS I would be grateful. Thank you
Website:http://www.gamemoth.com

Please add the following code into the theme’s css/override.css file (make sure to enable the “Use the override.css file” option in Template options > Advanced in the WordPress backend)

Code: Select all

#searchform #searchsubmit {
     margin-top: 10px;
 }


That did the trick, but after searching and landing on the results page I am encountering this issue: http://www.gamemoth.com/?s=test.

The search bar on the results page is also misplaced.

Would it be better to remove the 3rd party search plugin and use the default one and integrate it in the menu?

Hi,
It's your choice, default search is styled well in the Game theme:
http://www.gavick.com/demo/wordpress/game/?s=a

Maybe try to use the default one and then I'll try to help you with the appearance or now add this code into css/override.css file and should be also ok:

Code: Select all

.search-page #searchform #searchsubmit {
    float: none;
    padding: 0 10px;
}


Thanks. Should I insert a search widget in the in Appearance>widgets>header? Or does this have to be inserted in a php file for it to be integrated in the menu?

You should add the code into Game/layouts/header.php file, but did you check your website with my code added? I think it looks ok.

It looks great now. Yes I inserted your code and it solved the issue. The last thing is that the search bar appears quite big. What CSS code would I insert make the search bar a little smaller or thinner?

Try this code:

Code: Select all

 .gk-menu-wrap #searchform #searchsubmit {
     height: 25px;
     margin-top: 16px;
     line-height: 25px;
 }
 
 .gk-menu-wrap #s.field {
     padding: 5px 20px
 }


That did the trick. Thanks alot!