Remove search input from RWD (mobile)

[splinter_nld]

Hi All,

I'm changing the RWD theme of magento 1.9 and removed the search input including the magnifying glass button using this code as a Custom XML layout update on the landing page. 

<reference name="header">
<remove name="top.search" />
</reference>

This works great and also removes the search functionality in the mobile mode.

But in the mobile mode the search magnifying glass is still there and when pressed it shows the gray area where the search was.  

How can I removed this magnifying glass in the mobile mode?

[b72077]

I have the same question

[AddWebSolution]

Add below code into your theme local.xml

<default>
<reference name="header">
<remove name="top.search" />
</reference>
</default>

After clearing cache, goto theme themeCssfile.css and add CSS on "search" class repectively.

If using Mobile theme, then add below CSS to iphone.css: [ Line Number 343 ]

body > header .search {
display: none;

}

If using RWD theme, then add below CSS to styles.css: [  Line Number 3667 ]

#header-search {
          display: none;
        }

Let me know if you face any query/concern regarding this.

[splinter_nld]

Hi Addweb,  thanks for your reply!  Im almost there with your solution!

In the mobile view you have 4 blocks / icons on the top (menu, magnifying glass, account and shopping cart)

I addd your code in the styles.css of the RWD theme and that disables the gray area thats shown when you press the magnifying glass.  So thats really great! 

But actually I also want the complete magnifying glass icon not to be there at all.  

Is there a way to do that? With just CSS would be the nicest way if possible.

[AddWebSolution]

Splinter,

Would be glad to help, can you please provide followig details:

1. Can you please provide your website URL?
2. Which browser you are using?  Provide us screenshot for the same.
3. Which Mobile Theme you are using?  Provide us screenshot for the same.

Thanks!

[splinter_nld]

Hi Addweb,

it's still a dev site, so an url is a little difficult.

But its basically the standard RWD theme from magento 1.9.1

I use Chrome for windows in mobile mode (F12) or just safari on iphone to test.

He're is  a screenshot of what I mean.

I added two arrows:

1. If i remove the first line via chrome on the fly removes the whole block. 
2. If I remove the second line it removes the magnifying glass images. Either one is fine for me by hardcoding in CSS.

Thanks again!

[AddWebSolution · Accepted solution]

Splinter,

Please follow any of the provided methods below:

Add this css into your styles.css from your path: http://YourDomain.com/skin/frontend/myPackage/myTheme/css/styles.css

.skip-link.skip-search {
display: none;
}

OR

Goto Your header.phtml file and follow this path: http://YourDomain.com/app/design/frontend/myPackage/myTheme/template/page/html/header.phtml

Goto Line number 62 and replace the below code:

<!--<a href="#header-search" class="skip-link skip-search">
<span class="icon"></span>
<span class="label"><?php //echo $this->__('Search'); ?></span>
</a>-->

Goto Line number 91 and replace the below code:

<!--<div id="header-search" class="skip-content">
<?php //echo $this->getChildHtml('topSearch') ?>
</div>-->

This would surely solve your issue!

[splinter_nld]

Hi Addweb,

I chose to implement the CSS solution, because it should only be gone on the landing page.

I have a seperate CSS file for that to make it work. Your solution works perfect! 

With the By editing the phtml it would be gone on all pages.

Ill keep those codes for future use on different areas.

Thanks again!