How to Add a Search Box to a Mobile Responsive Screen

In current themes, when you're viewing the site on a mobile device, the search box isn't available. This is because the responsive CSS causes it to disappear. This article explains how you can add it.

Inserting the HTML

Now, you can place the HTML for your search box where you'd like it to be placed. However, I do recommend placing it in home.html because this will insert it right about the home page image, which is a good spot on mobile. Keep in mind, with what we're doing here, it will only show up there on mobile devices. Full-screen monitors will not display the box we're adding here, but will retain whatever search box you have in place.

        1. Go to Design > Cart Designer.

        2. Right-click on your home page image and select Edit Source Code.

        3. Place your cursor at the end of line 1 and hit enter. On line 2, paste in the following HTML:

<div class="search-main {class file=$smarty.template editable=true}">
        <form action="{$url_http}" method="get">
            <input type="hidden" name="p" value="catalog"/>
            <input type="hidden" name="mode" value="search"/>
            <input type="hidden" name="search_in" value="all"/>
            <input id="search-field-inner"  maxlength="256" type="text" name="search_str" value="{$search_str|htmlspecialchars}" placeholder="Search Store"/>
             {button class="button-start-search" text=$msg.buttons.buttonStartSearch file=$smarty.template}
        </form>
</div>

        4. Click Save. When the page refreshes, you will see a plain search box.

Inserting the CSS

        1. Next, you will want to add the CSS to make it disappear at bigger screen widths, and also CSS to make it look nice. In Cart Designer, go to Advanced Settings > Edit custom CSS and paste in the following:

.search-main form input#search-field-inner {
   border: medium none;
   box-shadow: none;
   float: left;
   font-size: 12px;
   font-style: italic;
   height: 38px;
   outline: medium none;
   padding-left: 10px;
   width: 180px;
}

        2. This CSS provides the same styling that is used on the default search box in the Dress Code theme. You can modify it as you need to match your overall website styling. Now copy and paste in the following:

@media screen and (min-width: 480px) {
    .search-main {
        display: none;
    }
}

This CSS will cause the search box to not appear on screens wider than 480px, making it responsive.

        3. Click Save and refresh the page. To test if this works, shrink down your browser size until you see the search box appear.

Links to Related Articles

None at this time.

If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.