Making all content in mobile menu centered in dawn theme

[MagdalenaBB]

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 🖤

[Moeed · Accepted solution]

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 </body> tag

<style>
.list-menu__item {
    justify-content: center !important;
}
.menu-drawer__utility-links {
    text-align-last: center !important;
}
ul.list.list-social.list-unstyled {
    justify-content: center !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Raj-webdesigner · Accepted solution]

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;
  }
}

[Moeed · Accepted solution]

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 </body> tag

<style>
.list-menu__item {
    justify-content: center !important;
}
.menu-drawer__utility-links {
    text-align-last: center !important;
}
ul.list.list-social.list-unstyled {
    justify-content: center !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[MagdalenaBB]

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?

[Raj-webdesigner · Accepted solution]

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;
  }
}

[niraj_patel · Accepted solution]

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 </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
  #menu-drawer .menu-drawer__inner-container {
     display: flex;
     justify-content: center;
  }
}
</style>

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