How can I center the search bar in my Flashmart theme?

Store Design
, , , , , ,

Topic summary

Issue: In the Flashmart (third‑party) Shopify theme, the search bar appears on the right side; the goal is to center it.

Proposed fix:

  • Edit theme files via Online Store > Edit code.
  • Open theme.liquid (or base.css) and add CSS near the end (above in theme.liquid if placing inline styles).
  • CSS provided:
    .header-top-right-group {
    width: 100%;
    display: flex;
    align-items: center;
    }

Context/notes:

  • The CSS targets the header container to control layout via Flexbox and alignment.
  • A store link and screenshots were shared to illustrate the current right-aligned search bar and where to add code.

Status: A single solution has been suggested; there’s no confirmation from the original poster that it resolves the issue. The discussion remains open.

Summarized with AI on January 17. AI used: gpt-5.
1

Dear Community, I hope everyone is doing well. I’m facing an issue with my Flashmart theme that’s a third-party theme, the search bar is on the right side, and I want to align it in the center. If someone knows the solution then let me know, please.

Thanks in advance

Here is the store link: https://mnshop.pro/

error.PNG
error.PNG1270×654 283 KB

2

Hi @Fahadhassan

Follow these Steps:

Go to Online Store Edit Code Find theme.liquid file or base.css

Add the following code in the bottom of the file above tag

.header-top-right-group {
    width: 100%;
    display: flex;
    align-items: center;
}

syedsumaimaly_0-1695814839762.png
syedsumaimaly_0-1695814839762.png1366×515 214 KB