Question

My simple setup:

<div id="menuwrap"> 
    <div id="menu">
        <jdoc:include type="modules" name="menu" styles="" />
    </div>
</div>

And

ul.menu {
    display: inline-block;
}

because i need it to be centered.

This is displayed as follows (imagine it is centered on the screen):

    Menu_Item_1 | Menu_Item_1 | Menu_Item_3

I would like to add a search box (a standard Joomla search module) as a menu item. That is:

    Menu_Item_1 | Menu_Item_1 | Menu_Item_3 | Search...

I’ve tried to put the search module into another div, inside #menuwrap and float #menu to the left and #search to the right.

    Menu_Item_1 | Menu_Item_1 | Menu_Item_3 |                         Search...

This is OK until resizing:

    Menu_Item_1 | Menu_Item_1 |
    Menu_Item_3 |
                                Search...

The #search just gets pushed under the #menu (on the third line – this is because the display of the ul is inline-block). The goal is to remain on the same line as the menu (i.e., second line), as follows:

Menu_Item_1 | Menu_Item_1 |
Menu_Item_3 | Search...

Any suggestions? Thanks.

Answer 1

If I’m understanding you correctly – you want to embed the search module itself within a menu – rather than linking to it from a menu item.

I think there are a number of ways to do this:

The easiest way is to fake it. Put a background on the div that contains your module position – publish two modules to that position (the menu and the search module) use css to make sure they float alongside each other.

Alternatively if you really need to embed the form within the same module I’d suggest creating a ‘custom module chrome’ to add the html of the search form to the output of any module you publish within a position that uses your custom module chrome style

Here is an article covering the basics – probably for an older version of Joomla – but as far as I can tell the principle holds:
http://docs.joomla.org/Applying_custom_module_chrome