Remove search bar in Empire theme

[nickcho]

Hi all, I just updated my Shopify site from a very old version of Empire to the latest version.

I remember having to go into the code to remove the search bar from the site completely (I don’t forsee I’d need it) because it’s cluttering the header. Now with the updated version, I can’t for the life of me seem to figure out, after much Googling, how to remove the search bar from the site.

I tried the methods in this image below, but Empire doesn’t appear to have a base.css file in the code. Only theme.css.liquid, but if I add that clipped code to the end of that file, it doesn’t seem to do anything.

Any help would be appreciated! Here’s my site if that helps.

[BSSCommerce-B2B]

Hi @nickcho

I have reviewed your requirement, You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Find the file theme.css.liquid and you fine the code in line 22554 and delete the code

@media screen and (min-width: 1024px) {
  .site-header-nav--open .site-navigation-wrapper {
    display: block;
  }
}

You save and test on you store

Plan2 :
You can add the code in to the end of the file. theme.css.liquid

.site-navigation-wrapper {
display :none 
}

Step 2: Save your code and reload this page.

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

[Made4uo-Ribe]

Hi @nickcho

Do you mean like this? Do you want to center the Logo? it will be automatic center if we take out the serch bar.

If it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.live-search {
    display: none;
}

And Save.

What i cant see you have theme.css file on the asset folder. Let me know the result. Thanks!

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[nickcho]

Perfect! Easy and it worked. Thank you!

[Made4uo-Ribe]

Welcome, Im sorry but its not so good the logo is in the center look messy with menu on left bottom and icons right top. If you like to make it logo left check this code below.

Same Instruction.

@media screen and (min-width: 1024px) {
.site-header-main-content {
    justify-content: flex-start;
}
}

And save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!