Struggle getting search icon to display on tablets

Question

I have quite a specific problem and just cannot seem to figure out what is going on.

I have a Fontawesome search icon which when clicked opens a VM search in a dropdown. This works fine on most mobile screen sizes and desktops but, for example, when using Chrome Dev tools and selecting iPhone X in landscape the icon is not visible. I have clicked through the classes and cannot see any display:none on this screen size so am completely at a loss as to why it is not displaying.

The related code is:

<div class="serchline">
<form action="/all-products/results,1-24?search=true" method="get">
<div class="searchsearch">
<input style="vertical-align :middle;" name="keyword" id="mod_virtuemart_search" maxlength="100" alt="Search" class="inputboxsearch ac_vm ac_input" type="text" size="100" value="Type text and hit enter" onblur="if(this.value=='') this.value='Type text and hit enter';" onfocus="if(this.value=='Type text and hit enter') this.value='';" autocomplete="off"></div>
<input type="hidden" name="limitstart" value="0">
<input type="hidden" name="option" value="com_virtuemart">
<input type="hidden" name="view" value="category">
</form>
<div class="ac_result" style="display:none;"></div>
<div class="sropen"><i class="fa fa-search"></i></div>
<div class="srclose"><i class="fa fa-times"></i></div>
</div>

I have flicked the site into Dev mode at present as I want to get this fixed so to view the site you will need to click here

I was hoping someone may be able to assist as I've been racking my brain over this for quite some time now.

UPDATE: The icon seems to disappear when the width goes above 768px so I'm still scouring through trying to find a media query which could relate to this.

Hi Donna, I think it’s not a css rule issue. Probably in your template you will be able to find some extra settings which let you display that search button and search field in more mobile versions. Somewhere there has to be settings of responsive views of the template or theme where you can display these fields too in the navigation area. That is how I see this after a short checking of your site. So you should check this more thoroughly. — Zollie
– Zollie, Commented Feb 17, 2019 at 18:02
I mean, in my template I can turn on and off any module (like search module) depending on screen sizes. In your template you used T3 template builder (if I remember well ) and I do not know that template builder well but that what I assumed that it has that extra ability too. And you do not have to do that in css. Maybe I’m wrong on this. — Zollie
– Zollie, Commented Feb 18, 2019 at 15:56
Hi Zollie, unfortunately this was not the case, it was an obscure custom css rule added in outside of the template css by the developer of the template. I think I have resolved the issue. — Dtorr1981
– Dtorr1981, Commented Feb 18, 2019 at 16:09

Neil Robertson · Accepted Answer · 2019-02-17 22:35:21Z

2

The search function is in the navbar which is hidden on narrower screen widths.

The relevant HTML is:

<div class="t3-navbar navbar-collapse collapse">

and the corresponding CSS is:

.collapse {
  display: none;
}

The easiest solution is probably to add an additional search module in an alternative module position for narrower screen widths.

answered Feb 17, 2019 at 22:35

Neil Robertson

8,1102 gold badges28 silver badges79 bronze badges

Hi Neil, this is not completely correct as it does display on mobiles. If you reduce the screen size to iPhone 6/7/8 you will see the search icon. So something odd if occurring. It only seems to disappear on Tablet sized screens and larger mobiles. I'm still investigating at present so will update when I find something (hopefully)

Dtorr1981
– Dtorr1981

2019-02-18 15:32:58 +00:00
Commented Feb 18, 2019 at 15:32

Add a comment |

Dtorr1981 · Accepted Answer · 2019-02-18 16:08:07Z

Ok, after a bit more in depth digging the following fixed the issue:

@media (min-width:768px) and (max-width:991px) {    
#t3-mainnav .t3-navbar.navbar-collapse.collapse { 
        display:block; 
        height:0px; 
        border:none; 
        background:none; 
        box-shadow:none; 
        position:static;
    }
    .t3-megamenu {
        display:none;
    }
}

The issue was seemingly due to some template customisations created by the template developer which when changing the responsive settings, then prevented the search icon from showing.

Thank you all for your comments. :)

Stack Exchange Network

Struggle getting search icon to display on tablets

2 Answers 2

Your Answer

Hot Network Questions

Struggle getting search icon to display on tablets

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions