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

How to Move the Search box into the Nav bar section? 
 
Danielc1234
Sr. Member
 
Avatar
Total Posts:  175
Joined:  2008-01-09
Miami, FL - United States
 

Is there an easy way to get the search bar into the nav bar section? I tired just copying the php code and pasting it into the nav bar section, but didnt have any luck.
Thanks in advance,
Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
flowstack
Sr. Member
 
Avatar
Total Posts:  159
Joined:  2008-01-30
London, United Kingdom
 

OOPS: The below is for moving search to the right sidebar. I just realised that wasn’t what you asked for!

I have done this for one of my templates. I am doing this from the top of my head as it’s not in front of me, but the GIST is below. You WILL have to complete other steps to get it working.

1. Make a copy of magento\app\design\frontend\default\avocado\template\reports\product_viewed.phtml and save it as magento\app\design\frontend\default\avocado\template\catalogsearch\search.phtml.

product_viewed.phtml acts as the basic skeleton of a sidebar box. We now paste the search form code into it.

2. Open search.phtml and remove clutter to give you the basic skeleton:

<div class="box base-mini mini-search">
    <
div class="head">
        <
div class="base-mini-title">
            <
h4><span><?php echo $this->__('Search'?></span></h4>
        </
div>
    </
div>
    <
div class="content">
             <!-- 
PASTE SEARCH CODE HERE -->
    </
div>
    <
div class="actions"></div>
</
div>

NOTE: I have removed the PHP if statement from around this code. The search box will not show otherwise. I have also changed the class name of the box to mini-search.

2. Open magento\app\design\frontend\default\avocado\template\catalogsearch\form.mini.phtml. Copy the code and paste it into the content div in search.phtml (marked above).

3. Open magento\app\design\frontend\default\avocado\layout\catalogsearch.xml. Add the following under the <default> attribute:

<reference name="right">
  <
block type="catalogsearch/search" name="right.catalogsearch.search" template="catalogsearch/search.phtml" />
</
reference>

4. Open boxes.css and edit the .mini-search attributes. You will need to get rid of the position: absolute line plus some others.

Like I say I am doing this from memory so there may well be errrors. But at least you get the idea.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Danielc1234
Sr. Member
 
Avatar
Total Posts:  175
Joined:  2008-01-09
Miami, FL - United States
 

Oh boy, I need something idiot proof! LOL
If something goes wrong, I have no idea where to look.

 
Magento Community Magento Community
Magento Community
Magento Community
 
flowstack
Sr. Member
 
Avatar
Total Posts:  159
Joined:  2008-01-30
London, United Kingdom
 

Have you tried editing .mini-search in boxes.css?

Just play with the left and top pixel values until you are happy with the position.

e.g.

.mini-search { top: 100px; left: 600px; position: absolute; }

 
Magento Community Magento Community
Magento Community
Magento Community
 
Danielc1234
Sr. Member
 
Avatar
Total Posts:  175
Joined:  2008-01-09
Miami, FL - United States
 

Great! It worked. I don’t know if that is the proper way to do it, but it seems to be working fine.
I have to get my mindset off ‘tables’ and get to speed with the css.
Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
flowstack
Sr. Member
 
Avatar
Total Posts:  159
Joined:  2008-01-30
London, United Kingdom
 

Once you get the hand of CSS, you’ll never look back smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
schmelzgeist
Sr. Member
 
Total Posts:  92
Joined:  2008-05-27
Marzipane World Capital (Lübeck, Germany)
 

seems i am running in circles here, i tried to modify it for use in the center as part of the content structural block , but to no avail :

this is the code i put in my home CMS Page

<reference name="content">
 <
block type="catalogsearch/search" alias="search" name="home.catalogsearch.search" template="catalogsearch/form.mini.phtml" after="cms_page"/>
 <
block type="catalog/product_new" name="home.catalog.product.new" alias="product_new" template="catalog/product/new.phtml" after="search"/>
<
block type="reports/product_viewed" name="home.reports.product.viewed" alias="product_viewed" template="reports/home_product_viewed.phtml" after="product_new"/>
<
block type="reports/product_compared" name="home.reports.product.compared" template="reports/home_product_compared.phtml" after="product_viewed" />
</
reference><reference name="right">
<
action method="unsetChild"><alias>right.reports.product.viewed</alias></action>
<
action method="unsetChild"><alias>right.reports.product.compared</alias></action>
</
reference>

but as i’m not entirely sure about the syntax of ‘type’ and ‘name’
i think i’m stuck, haven’t found the right information yet.

 
Magento Community Magento Community
Magento Community
Magento Community
 
mmabardy
Member
 
Total Posts:  67
Joined:  2010-07-09
 

@ Flowstack

That is exactly how I would like to accomplish moving the search box to the nav bar but I dont have a boxes.css and also, I cannot find .mini-search in any of my files.  Please help if you know of any other way.  Thank you.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mike
Member
 
Total Posts:  43
Joined:  2007-09-11
Los Angeles, CA
 

I wanted to accomplish the same thing (moving the search field into the same horizontal bar as my navigation) and this is what worked for me

[I’m using Magento v1.4.1.1 and have a theme that is based on the “Modern” theme]

To move the search field into the same area as the horizontal navigation, I needed to get Magento to display the search field’s code within the “nav-container” div. So, I edited the file “catalogsearch.xml” (at app>design>frontend>default>mythemename>layout>catalogsearch.xml).

On line 32, there is code that reads:

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

I simply changed the reference name from “top.bar” to “top.menu”

This now displays the search field within the “nav-container” div.

I hope that this helps someone else!

 
Magento Community Magento Community
Magento Community
Magento Community
 
beauty-presence
Jr. Member
 
Total Posts:  13
Joined:  2010-10-24
 

@Mike

That’s nice but the it doesn’t display the searchbox in the navbar, it displays right below it and without the previous css (logical).  I’m using the default template coming with 1.4.1.1

What is really strange is that it displays the search box without even being called ( I did <?php /* echo $this->getChildHtml('topSearch') */ ?> in the header.phtml so as to ignore it).  Why?

I want to be able to call it in \app\design\frontend\bp\bp-theme\template\catalog\navigation/top.phtml but to put anything there now has no effect.

Thanks for any advice.

 
Magento Community Magento Community
Magento Community
Magento Community
 
dastoke
Jr. Member
 
Total Posts:  21
Joined:  2012-03-14
 

Did anybody ever solve how to move the mini search to the navigation?
I have tried all the solutions in this thread and whilst the mini search is pulled through it displays outside of navigation, creating it own navigation bar.
Thanks to anyone who has a solution!!

 
Magento Community Magento Community
Magento Community
Magento Community
 
dastoke
Jr. Member
 
Total Posts:  21
Joined:  2012-03-14
 

I have updated the Catalogsearch.xml and changed the reference from header to top.menu but the quick search bar moves down underneath the exisitng navigation strip and centre aligns. (Image attached)
I have tried to alter the .header .form-search CSS but it will not move.
Should I be changing some other CSS?
Also forgot to mention that i currently have the search bar placed in the navigation bar by using CSS but this is far from ideal when viewing with different browsers.
Thanks for any help!

Image Attachments
new-2.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top