cancel
Showing results for 
Search instead for 
Did you mean: 

Remove search input from RWD (mobile)

SOLVED

Remove search input from RWD (mobile)

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?

 

 

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Remove search input from RWD (mobile)

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! Smiley Happy

Query solved? Accept as Solution.Thanks
Eric Baily

View solution in original post

7 REPLIES 7

Re: Remove search input from RWD (mobile)

I have the same question

Re: Remove search input from RWD (mobile)

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.

 

 

Query solved? Accept as Solution.Thanks
Eric Baily

Re: Remove search input from RWD (mobile)

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.

 

Re: Remove search input from RWD (mobile)

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!

Query solved? Accept as Solution.Thanks
Eric Baily

Re: Remove search input from RWD (mobile)

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!

 

RWD mobile

Re: Remove search input from RWD (mobile)

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! Smiley Happy

Query solved? Accept as Solution.Thanks
Eric Baily

Re: Remove search input from RWD (mobile)

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. Smiley Happy

 

Thanks again!