How can I remove the search bar on mobile using Dawn Theme?

Technical Q&A
,
1

Hi,

I’ve used this code to remove the search bar icon on the header:

}
details-modal.header__search {
display: none !important;
}

But it doesn’t work when I view my store on a mobile, only hides the search bar for desktop.

Is there a solution for this?

2

Hey @ElumaLuxxx

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

You could give this a try,

.header__icon--search { 
  display:none;
}

My two cents. Good luck!

4

Hey @Moeed ,

www.elumalux.com

5

No luck with this unfortunately, thanks anyway

6

A closing-bracket tag is missing in your base.css on the following css-rule:

@media (prefers-reduced-motion: no-preference) and (hover: hover) { ..

You could give this fix a try:

.animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
  }
} /* <- add curly-bracket (close) */
  details-modal.header__search {
    display: none !important;
  }

My other two cents :wink:

7

Hi @ElumaLuxxx ,

Add the following CSS at the end of the base.css file in the theme’s edit code:

@media screen and (max-width: 749px) {
  .header__search {
     display: none !important;
  }
}

Hope they can help you @ElumaLuxxx

8

Thank you so much! Works perfectly, such a relief to have it finally gone