REPOSITIONIG MENU ITMES AND LOGO IN HEADER. CENTRE ALIGNMENT AND MARGIN TO THE LEFT AND RIGHT

Shopify Discussion

Topic summary

A Shopify store owner using the Dawn theme seeks help repositioning header elements on their website (www.slidein.co.in).

Desktop Issues:

  • Logo and menu need centering (currently shifted right)
  • Excessive margin space on left and right sides of header needs reduction

Mobile Issues:

  • Logo alignment inconsistent: centered on homepage but shifts right on other pages (collections, FAQ)
  • Header and banner size need reduction, including font and logo dimensions

Multiple solutions were proposed:

  • CSS code to center the inline menu using text-align: center
  • Custom CSS to reduce header padding using padding-inline: 0 for screens 1024px+
  • Explanation that apparent misalignment stems from previous custom code creating uneven spacing between logo and menu

Current Status:
The desktop alignment issue is resolved and left unchanged. However, the proposed CSS code for removing side margins isn’t working for the user. The mobile logo alignment inconsistency across different pages remains unresolved and requires further troubleshooting.

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

Hi,

I would like to centre my header menu which is currently slightly to the right. I want the logo to be in the centre. Have attached a screenshot for a rough idea. Also need to reduce the margin space on either side of the header.

Need these corrections only for desktop view. it should not effect mobile view.

In, the mobile view Need to correct the alignment as well. Need to centre the logo and reduce the banner and header size. including font and logo size. For reference i’ve attached mobile view of my website and a mobile view of how I would like the banner and header size.

My website is www.slidein.co.in

I’m using dawn theme.

Screenshot 2025-01-11 at 8.41.57 AM.png
Screenshot 2025-01-11 at 8.41.57 AM.png3024×1716 1.15 MB

WhatsApp Image 2025-01-11 at 12.43.10 AM.jpeg
WhatsApp Image 2025-01-11 at 12.43.10 AM.jpeg1206×2622 282 KB

IMG_1664.jpg
IMG_1664.jpg1206×2622 377 KB

2

Hi there @slidein_india for centering the menu, I believe this could should work for you

.header__inline-menu { text-align: center; }

Give it a try and let me know whether it’s successful

3

Hi @slidein_india ,

Thanks for sharing the details and screenshot! Centering the logo and menu, reducing margins, and adjusting the header will require tweaks to the Dawn theme’s CSS. We’ll need to review the existing styles and make desktop-specific changes without affecting mobile.

Let me know if you’d like us to handle this for you!

Best,
Shreya | Revize

4

Hi @slidein_india

Here is the code to reduce space on both headers.

You can follow this instruction:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section

@media screen and (min-width: 1024xp){
header.header {
padding-inline: 0 !important;
max-width: unset !important;
}
}

EstherBui_0-1736597428737.png
EstherBui_0-1736597428737.png907×252 170 KB

About the logo being misaligned, both the logo and the menu are centered. However, you customized the code earlier to align the logo with the menu. You also added CSS to create a space between the menu and the logo. This makes it look misaligned because the text length on either side of the menu is different.

I recommend leaving it as it is, or moving the menu below the logo.

I hope it helps.

Esther

5

Hi,

The code isn’t working for me. Thanks for the explanation regarding the alignment. I understand and have left it untouched as it’s properly aligned in the desktop view now. My only concern now is in the mobile view on the main page the logo is aligned at the centre but when you navigate to any other page. collections or faq etc the logo’s alignment shifts to the right. Can you help me solve that. And also, the code for removing the spaces to the left and right aren’t working in mine.