title: How to add a search module as a menu item in Joomla?
body: <p>My simple setup:</p>
  
  <pre><code>&lt;div id="menuwrap"&gt; 
      &lt;div id="menu"&gt;
          &lt;jdoc:include type="modules" name="menu" styles="" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And</p>
  
  <pre><code>ul.menu {
      display: inline-block;
  }
  </code></pre>
  
  <p>because i need it to be centered.</p>
  
  <p>This is displayed as follows (imagine it is centered on the screen):</p>
  
  <pre><code>    Menu_Item_1 | Menu_Item_1 | Menu_Item_3
  </code></pre>
  
  <p>I would like to add a search box (a standard Joomla search module) as a menu item. That is:</p>
  
  <pre><code>    Menu_Item_1 | Menu_Item_1 | Menu_Item_3 | Search...
  </code></pre>
  
  <p>I've tried to put the search module into another <code>div</code>, inside <code>#menuwrap</code> and float <code>#menu</code> to the left and <code>#search</code> to the right.</p>
  
  <pre><code>    Menu_Item_1 | Menu_Item_1 | Menu_Item_3 |                         Search...
  </code></pre>
  
  <p>This is OK until resizing:</p>
  
  <pre><code>    Menu_Item_1 | Menu_Item_1 |
      Menu_Item_3 |
                                  Search...
  </code></pre>
  
  <p>The <code>#search</code> just gets pushed under the <code>#menu</code> (on the third line - this is because the display of the <code>ul</code> is <code>inline-block</code>). The goal is to remain on the same line as the menu (i.e., second line), as follows:</p>
  
  <pre><code>Menu_Item_1 | Menu_Item_1 |
  Menu_Item_3 | Search...
  </code></pre>
  
  <p>Any suggestions? Thanks.</p>