Making all content in mobile menu centered in dawn theme

Solved

Making all content in mobile menu centered in dawn theme

MagdalenaBB
Excursionist
20 0 8

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 🖤

MagdalenaBB_0-1719303445114.png

 

Accepted Solutions (3)

Moeed
Shopify Partner
4351 1121 1375

This is an 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:

Moeed_0-1719303787824.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Raj-webdesigner
Shopify Partner
322 75 78

This is an 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;
  }
}

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


View solution in original post

techlyser_web
Shopify Partner
1794 332 358

This is an 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>

techlyser_web_0-1719304502140.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 4 (4)

Moeed
Shopify Partner
4351 1121 1375

This is an 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:

Moeed_0-1719303787824.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
MagdalenaBB
Excursionist
20 0 8

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
Shopify Partner
322 75 78

This is an 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;
  }
}

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


techlyser_web
Shopify Partner
1794 332 358

This is an 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>

techlyser_web_0-1719304502140.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com