1

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.

  • 1
    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 Feb 17 at 18:02
  • 1
    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 Feb 18 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 Feb 18 at 16:09
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.

  • 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 Feb 18 at 15:32
2

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. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.