Moving Magento Search to Navigation Bar

Question

I know this issue has been asked several times around the web, but none of those solutions seem to work for me.

In the template app/design/frontend/themename/default/template/page/html/header.phtml

I have a call for <?php echo $this->getChildHtml('headernav') ?>

In headernav.phtml lies the call for the search bar <?php echo $this->getChildHtml('topSearch') ?>

Relevant contents of app/design/frontend/themename/default/layout/catalogsearch.xml:

<reference name="top.menu">
    <block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
</reference>

This makes the search bar appear, but it is placed outside of the contents of headernav.phtml, and not inline where I put it. (I checked the markup in Chrome Dev Tools, it's nowhere near where it's supposed to be). I could hack it with CSS, or insert the contents of form.mini.phtml to be exactly where I want it, but I know this isn't the correct way to handle this, and will only lead to revisions later.

I have also tried:

<reference name="headernav">
    <block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
</reference>

Can anyone here enlighten me as to why this isn't appearing in the proper template file and how I can get xml to allow me to use it inside a "sub-template" of header.phtml

(e.g. header.phtml calls on heavernav.phtml which calls form.mini.phtml)

Answer 1

In theme layout\catalogsearch.xml change string

<reference name="header">

to

<reference name="catalog.topnav">

then put

<?php echo $this->getChildHtml('topSearch') ?> 

in catalog/navigation/top.phtml where you want to see search block

Answer 2

Just tried to figure this out for the past few hours and got stuck until I seen Sanketkumar's answer.

Many other solutions will tell you to change the <reference name="header"> to <reference name="top.menu">. I tried this many times and had the same error as you, with the navigation bar appearing right below the navigation bar.

I also tried removing the call of <?php echo $this->getChildHtml('topSearch') ?> in my topmenu.phtml but it was still rendering somehow.

I made Sanketkumar's change and it worked properly.

My exact changes:

Use local.xml or create a new one and add this code:

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <default>
        <reference name="catalog.topnav">
            <block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
        </reference>
   </default>
</layout>

Open topmenu.phtml and add <?php echo $this->getChildHtml('topSearch') ?> to the area you want to display. My exact section of the navigation looked like:

<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
	<div class="container">
		<div class="row">
            <div class="span12">
                <div id="menu-icon"><?php echo $this->__('Navigate') ?></div>
                <ul id="nav" class="sf-menu">
                    <?php echo $_menu ?>

			        <li style="float: right;">
						<?php echo $this->getChildHtml('navSearch') ?>
					</li>

                </ul>
                <ul class="sf-menu-phone">
                    <?php echo $_menu ?>

        			<li>
						<?php echo $this->getChildHtml('navSearch') ?>
					</li>

                </ul>
            </div>
        </div>
		<div class="clear"></div>
	</div>
</div>
<?php endif ?>

(Notice that I added it twice - once for desktop and once for mobile site. I also added it in a list so it displayed properly and floated right on the desktop version.)

Hope this helps!