I want to centre a header

Store Design
, ,

Topic summary

A user is experiencing an alignment issue where their website header (swawe.store) is not centered on desktop, though it displays correctly on mobile.

Solutions Proposed:

Two community members offered CSS-based fixes:

  • Solution 1: Add custom CSS code to the theme.liquid file, placed above the closing </body> tag
  • Solution 2: Navigate to Online Store > Themes > Customize > Theme settings > Custom CSS and insert a media query targeting screens wider than 990px that adjusts the header menu alignment and grid template columns

Both approaches involve adding CSS rules to override the default header styling specifically for desktop viewports. The discussion remains open as the original poster has not confirmed whether either solution resolved the centering issue.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

this header on my website https://swawe.store/ isn’t coming at the centre on desktop
can someone help me fix this, it is fine on mobile

Screenshot 2024-07-04 at 13.08.15.png
Screenshot 2024-07-04 at 13.08.15.png2739×505 24.3 KB

2

Hey @attackon

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

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

RESULT:

Moeed_0-1720079121786.png
Moeed_0-1720079121786.png720×334 6.95 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @attackon

Please go to Online Store > Themes > Customize > Theme settings > add this code to Custom CSS,

@media(min-width: 990px) {
    .header--middle-left {
        grid-template-columns: auto auto auto !important;
    }
    .header__inline-menu { text-align: center; }
}