Pipeline Search Bar/Icon On Mobile?

Store Design
, ,
1

I’m looking for a workaround for the Pipeline theme. I was requested to include a search bar (or icon) on the header for our shop, specifically when its condensed on mobile.

I have tried following other guides but I am worried it is theme-related, so any help is good! My knowledge in CSS is limited, but if anyone has any code or resources to build this in it would be great.

Relevant info below:

PS: I have seen other threads on this site with similar issues, but if there is a way to put the search at the bottom on the header that would a nice bonus.

3

Your search on mobile is still there, it’s just in the hamburger menu. But there is a css code you can drop into the Custom CSS box in the header section

@media screen and (max-width: 768px) {
  .header__desktop {
    display: block !important;
    position: absolute;
    top: 0;
    right: 60px;
    z-index: 100;
    width: auto;
    height: auto;
    background: transparent;
  }
  .header__desktop__bar__l,
  .header__desktop__bar__c,
  .header__desktop__buttons
    > *:not(.header__desktop__button:has(.icon-set-mod-search)) {
    display: none !important;
  }
  .header__desktop__button:has(.icon-set-mod-search) {
    display: flex !important;
    height: 70px;
    align-items: center;
    padding: 0 10px;
  }
}
4

Hey @Jimmy_Nguyen .

Hope you are having a wonderful day!

Check your theme customizer under header settings; there’s likely a search icon toggle already there.

If not, drop a search icon into your header code and hide it on desktop with a quick CSS media query.

5

Hi @Jimmy_Nguyen

Currently, on mobile, the search is appearing inside the drawer menu. Is that what you want, right?

image
image409×566 61.4 KB

6

The goal is that the search icon appear where you have highlighted, not in the hamburger menu.

I am testing the different responses I have received so far.

7

I have been in touch with Pipeline, and this isn’t a feature they currently have available. It does seem that I will need to write code in the custom theme CSS?

8

I did try this method!! I can adjust and tweak around, as there seems to be a padding issue across different device orientations?

This is a good start thank you! I will keep looking around

9

That would be amazing! This advice is very helpful.