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

To Move The Search in the Orizontal Menu. 
 
Black Cat
Mentor
 
Avatar
Total Posts:  3481
Joined:  2008-02-14
Assemini / Cagliari (Italy)
 

Hi.
I would like to move the “search” box from the header to the horizontal menu, to the right of the topmenu (categories). Particularly it would serve me move it inside the div with class="header-nav-container." Is the problem that this tag is not found in the file header.phtml, but in another file recalled by the function <? php echo $this->getChildHtml ('topMenu')?>,
How can I do to move the box search inside “header-nav-container?”

 
Magento Community Magento Community
Magento Community
Magento Community
 
zugzug20
Jr. Member
 
Total Posts:  3
Joined:  2008-04-20
 

Okay, my solution, which I am not sure if it is the correct way or not is as follows:

Open up page/html/header.phtml and catalog/navigation/top.phtml

page/html/header.phtml should look like this:

<div class="header-nav-container">
<div class="header-nav">
<?php echo $this->getChildHtml('topSearch') ?>
<?php echo $this->getChildHtml('topMenu') ?>
</div>
<?php echo $this->getChildHtml('topLeftLinks') ?>
</div>

catalog/navigation/top.phtml should look like this:

<h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
<ul id="nav">
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?>
</ul>

You’ll need to add “position:relative” to .header-nav in boxes.css in order to real in the form though.

 
Magento Community Magento Community
Magento Community
Magento Community
 
sdb
Sr. Member
 
Avatar
Total Posts:  223
Joined:  2007-11-13
coastal California, USA
 

i dont know if you got it to work already, but this was my solution

i cut and pasted the code from where the search box was and moved it to

/template/catalog/navigation/left.phtml
and placed it where i wanted it to go

(you will also want to change the relevant css in boxes.css)

<form id="search_mini_form" action="<?php echo $this->helper('catalogSearch')->getResultUrl() ?>" method="get">

    <
fieldset class="mini-search">

    <
legend><?php echo $this->__('Search Site'?></legend>

        <
input id="search" type="text" class="input-text" name="<?php echo $this->helper('catalogSearch')->getQueryParamName() ?>" value="<?php echo $this->helper('catalogSearch')->getEscapedQueryText() ?>"/>

        <
input type="image" src="<?php echo $this->getSkinUrl('images/btn_mini_search.gif') ?>" alt="<?php echo $this->__('Search') ?>"/>

        <
div id="search_autocomplete" class="search-autocomplete"></div>

        <
script type="text/javascript">

            var 
searchForm = new Varien.searchForm('search_mini_form''search''<?php echo $this->helper('catalogSearch')->__('Search entire store here...') ?>');

            
searchForm.initAutocomplete('<?php echo $this->helper('catalogSearch')->getSuggestUrl() ?>''search_autocomplete');

        
</script>

    
</fieldset>

</
form>
 
Magento Community Magento Community
Magento Community
Magento Community
 
Black Cat
Mentor
 
Avatar
Total Posts:  3481
Joined:  2008-02-14
Assemini / Cagliari (Italy)
 

don’t work|
besides to me it served the search as a block independent from any other and easily modifiable before and after another block

 
Magento Community Magento Community
Magento Community
Magento Community
 
DanielA
Jr. Member
 
Total Posts:  9
Joined:  2008-01-24
 

Did anyone found how to do this?

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
DanielA
Jr. Member
 
Total Posts:  9
Joined:  2008-01-24
 

Did anybody found how to do this?

Thanks

Pd: Sorry for this second post wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
dave_psm
Jr. Member
 
Total Posts:  3
Joined:  2009-06-08
 

Hi,
you can try the solution posted by “ZugZug20” it’s easy and work fine wink !

Bye

 
Magento Community Magento Community
Magento Community
Magento Community
 
Comit Tech
Jr. Member
 
Total Posts:  2
Joined:  2009-08-26
 

Could you post a link to where the solution is?

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
nathus
Sr. Member
 
Total Posts:  93
Joined:  2008-12-13
Twin Cities, MN
 

2nd post in this thread

 
Magento Community Magento Community
Magento Community
Magento Community
 
osol
Member
 
Avatar
Total Posts:  35
Joined:  2009-11-10
Ernakulam,India
 

This can be done in 2 steps
1.
in layout/catalogsearch.xml

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

2.
add

<li style=\"float:right\" ><?php echo Mage_Core_Block_Template::fetchView("frontend/default/".Mage::getDesign()->getTheme('template')."/template/catalogsearch/form.mini.phtml"); ?></li>

inside catalog/navigation/top.phtml

 
Magento Community Magento Community
Magento Community
Magento Community
 
gezzamondo
Jr. Member
 
Total Posts:  19
Joined:  2010-04-20
 
osol - 20 April 2010 12:29 AM

This can be done in 2 steps
1.
in layout/catalogsearch.xml

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

2.
add

<li style=\"float:right\" ><?php echo Mage_Core_Block_Template::fetchView("frontend/default/".Mage::getDesign()->getTheme('template')."/template/catalogsearch/form.mini.phtml"); ?></li>

inside catalog/navigation/top.phtml

this method didnt work

 
Magento Community Magento Community
Magento Community
Magento Community
 
gezzamondo
Jr. Member
 
Total Posts:  19
Joined:  2010-04-20
 
osol - 20 April 2010 12:29 AM

This can be done in 2 steps
1.
in layout/catalogsearch.xml

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

2.
add

<li style=\"float:right\" ><?php echo Mage_Core_Block_Template::fetchView("frontend/default/".Mage::getDesign()->getTheme('template')."/template/catalogsearch/form.mini.phtml"); ?></li>

inside catalog/navigation/top.phtml

this method didnt work for me

 
Magento Community Magento Community
Magento Community
Magento Community
 
Agena Astro
Jr. Member
 
Avatar
Total Posts:  22
Joined:  2009-09-21
Cerritos, CA
 

Quick and dirty method:

Place the search bar just above (or below) your nav bar (this code: <?php echo $this->getChildHtml('topSearch') ?>) in header.phtml, or top.phtml, or whatever has the information for your header, depending on your theme.

Edit the CSS of the search bar (inspect it with FireBug if you don’t know the class name) so that “position:relative;” then bump it up/down/around until it fits over your navbar with positioning elements.  “top:10px;” if you want it 10px further down, “right:20px;” for… you get the idea, haha.

You can edit the CSS of the box such that it blends in with your navbar’s styling and viola… you have yourself what you wanted!

 
Magento Community Magento Community
Magento Community
Magento Community
 
diligence
Jr. Member
 
Total Posts:  5
Joined:  2010-04-25
 

Can anyone help with this first question

Black Cat - 28 April 2008 05:04 PM

Hi.
I would like to move the “search” box from the header to the horizontal menu, to the right of the topmenu (categories). Particularly it would serve me move it inside the div with class="header-nav-container." Is the problem that this tag is not found in the file header.phtml, but in another file recalled by the function <? php echo $this->getChildHtml ('topMenu')?>,
How can I do to move the box search inside “header-nav-container?”

I would like to place the search box within the

<div class="nav-container"> </>

Some clear instructions would be greatly appreciated

Many Thanks

Diligence

 
Magento Community Magento Community
Magento Community
Magento Community
 
amom08
Jr. Member
 
Total Posts:  2
Joined:  2011-08-18
 

Open catalogsearch.xml:

/app/design/frontend/<TEMPLATE>/default/layout/catalogsearch.xml
THEN RENAME THE top.search REFERENCE TAG FROM THIS:
<reference name="header">
    <
block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
</
reference>
TO THIS:
<reference name="top.menu">
    <
block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
</
reference>

Then don’t forget to remove the <?php echo $this->getChildHtml('topSearch') ?> on your header.phtml file.

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