Making all content in mobile menu centered in dawn theme

Store Design
, , , ,

Topic summary

A user seeks to center all content in the mobile dropdown menu (including footer) for their Shopify Dawn theme store.

Solutions Provided:

Three community members offered CSS-based fixes, all involving:

  • Accessing Online Store → Edit Code → theme.liquid file
  • Adding custom CSS before the </body> tag
  • Using media queries targeting mobile screens (max-width: 767px-990px)
  • Applying display: flex and justify-content: center to menu drawer elements

Current Status:

The original poster confirmed one solution worked initially, but reported a follow-up issue: some elements aren’t perfectly centered, creating a visually inconsistent appearance. They’re seeking guidance on why this occurs and how to fix the alignment problem.

The discussion remains open with the centering partially resolved but requiring refinement.

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

Hey all!

I would like all the content in the dropdown menu on phone view to be centered horizontally, including the footer. How do I do that?

Website - maisonmagdalena.com

Password - MaisonMagdalena.222

Thank you in advance :black_heart:

MagdalenaBB_0-1719303445114.png
MagdalenaBB_0-1719303445114.png481×849 16.5 KB

2

Hey @MagdalenaBB

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-1719303787824.png
Moeed_0-1719303787824.png374×665 10.8 KB

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

Best Regards,
Moeed

1 Like
3

Add this css in your edit code > base.css file

@media screen and (max-width:990px){
	ul.menu-drawer__menu.has-submenu.list-menu li {
	    display: flex;
	    justify-content: center;
	}
}
@media screen and (max-width:990px) and (min-width:750px){
  ul.menu-drawer__menu.has-submenu.list-menu{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
  }
}
1 Like
4

Hello @MagdalenaBB

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { #menu-drawer .menu-drawer__inner-container { display: flex; justify-content: center; } }

techlyser_web_0-1719304502140.png
techlyser_web_0-1719304502140.png313×543 9.16 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
5

Hey! It worked thank you. However, after second inspection it seems some of the elements are not perfectly centered, making it all look strange. Any idea why that is and how to fix it?