Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Move Search into the same block as the top level navigation
 
tcarneal
Jr. Member
 
Total Posts:  1
Joined:  2008-09-16
 

I am new to magento and have been working with it for the last week or so. I love the package as a whole, though I am stilled a little confused.

I would like to move the top.search form into the top.menu area. to the far right, so I have all the categories left justified in that area and then have the top.search right justified.

I have created a new theme and it has worked fine for me thus far having moved some blocks around and customized some css so that is working fine.

I have removed <?php echo $this->getChildHtml('topSearch') ?> from app/design/frontend/default/my_theme/template/page/html/header.phtml and replaced the reference name “header” in app/design/frontend/default/my_theme/layout/catalogsearch.xml with “top.menu”

This moved the search bar below the navigation and to the right.. progress, but I can only see the move when I have Template Path Hints enabled. I have the cache disabled so I am confused, I even deleted the cache files just to make sure with no success, any ideas or suggestions would be much appreciated.

 
Magento Community Magento Community
Magento Community
Magento Community
 
runawaykinms
Sr. Member
 
Total Posts:  80
Joined:  2010-05-27
United States
 

I am having the same exact problem, and tried the same things you did with the same results.

Essentially what we are trying to do is move the mini search block inside of the navigation (drop down menu) block. If the desired result was accomplished, the menu would list the categories to the left and the search form would be on the same line to the right.

I have seen a few people suggest using CSS to place the search form to the desired location, but I would like to do this by using the magento layout approach.

Any solutions or suggestions?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Tini
Sr. Member
 
Total Posts:  92
Joined:  2010-03-25
 

I understand you want to change the search to the navigation bar at the same place listed category navigation. If so the following solution works for me perfectly.
In the /app/design/frontend/default/MY THEME/template/catalog/navigation/top.phtml, includes the following line:

<?=$this->getLayout()->getBlock('top.search')->toHtml()?>

the file would look like this:

<div class="nav-container">
    <
ul id="nav">
        
<?php echo $_menu?>
     
<li class="mini-search"><?=$this->getLayout()->getBlock('top.search')->toHtml()?></li>
    </
ul>
</
div>

If you look at the line of code we have introduced the label to assign a new class <li> that we have created within the Navigation section of the stylesheet. This new style that we have created focus search form vertically and aligned on the right.

#nav .mini-search {float:right; margin:0 auto; padding:3px 0 0 0; }

Let us also note where we have set this line:

.nav-container { border-bottom:3px solid #866b07; background:#d7a900 url(../images/bkg_nav0.jpg) 50% 0 repeat-y; }
#nav { width:918px; margin:0 auto; padding:0 16px; font-size:13px; }
#nav .mini-search {float:right; margin:0 auto; padding:3px 0 0 0; }

This should work well for you.

 
Magento Community Magento Community
Magento Community
Magento Community
 
mellog
Jr. Member
 
Total Posts:  29
Joined:  2010-05-22
 

I am using version 1.4.2.0.
The above described solutions did not work for me including this option: http://www.design17.co.uk/blog/moving_nav_into_navigation/

My solution is to move the search box down to the navigation bar:
Use firefox extension firebug to inspect the element (right click on the search box an choose inspect element). You will see that the position of the search box is defined on line 497 in the file styles.css in /skin/frontend/default/default/css/. (I use the default theme)

The main changes are in: top:90px; right:0px and comment out padding:1px 0 0 16px;. My line 497 looks like this:

.header .form-search { position:absolute; top:90px; right:0px;/* width:315px; */ /* height:30px; */ /* background:url(../images/bkg_form-search.gif) 0 0 no-repeat; */ /* padding:1px 0 0 16px; */ }

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top