add search box in primary menu

You shold do this simply using CSS imho.
For example, make your header

position: relative

then make the searchform

position: absolute; bottom: 0; right: 0;

and leave some padding-right on your menu, so menu entries won’t go under the searchbox.

This is just one way to do it.

No need for complicated code here.

I added the

#header {
    position: relative;
}

I then added the position: absolute; top: 145; right: 140; to this css (see below) and the search box is now appearing inside the nav menu bar on the right margin.

#searchform {
	color: #fff;
	float: right !important;
	border: 0 !important;
        position: absolute; top: 145px; right: 135px;
	padding: 10px;
        background: #FEC42D;
        width: 240px;
	}

It works, thanks to your input. Now I’d like the search box to appear on the left side of the primary menu. I used float: left; but the box never moved to the left margin. I then used this and the search box appears on the left margin but it hides the navigation pages “Home” and “Sample Page”:

position: absolute; top: 145px; left: 135px;

I want the search box to appear inside the primary menu on the left margin. Any other css tricks to do this? Or do I have to make a change to the code for the nav pages?

For CSS-specific queries, consider CSS-specific forums.

Try this — move the menu items over by adding the margin-left:

.main-navigation {
    margin-left: 250px;
}

The remove all the absolute positioning — that’s not the way to go — use float: left, change the width and a negative top margin to move it up:

#searchform {
    background: none repeat scroll 0 0 #FEC42D;
    float: left !important;
    width: 240px;
    margin-top: -50px;
}

But do be aware that all this fooling around with the layout and adding elements willy nilly may be wrecking havoc with the responsiveness of the original theme code…

I used Firebug’s Inspect Element and Web Developer’s Tools to find the code in the Twenty Twelve parent theme. On line 1393, I found the css for the nav bar positioning so I added the following code to the 2012 child theme’s custom css file:

@media screen and (min-width: 600px)
  .main-navigation ul.nav-menu,
  .main-navigation div.nav-menu > ul {
    text-align: right;
  }

When I use Firebug, the menu items (Home, Sample page) appear as desired — aligned on the right margin and the search box on the left margin as I want it. However, the css changes don’t appear on my browser. I experienced the same issue when I loaded the site on another computer.

@wpyogi It works beautifully!

I used Firefox Web Developer Tools > Responsive Design View. And you’re right about the responsive view — the top navigation links don’t appear on 360×640 or lower screens; only the search box appears. I will say that the pages do appear in the footer widget though.

I checked the theme (without this css code) to see if it supports 360×640 and lower. It doesn’t (the top navigation links don’t appear) so I’ll inform the theme’s author because many themes support lower resolution.