Mega menu sidebar text alignment

Store Design

Topic summary

A user needed help centering text in their Shopify store’s mega menu sidebar, sharing a screenshot showing the alignment issue.

Solution Provided:

After the user shared their store URL, a support team member provided CSS code to be added to the theme.liquid file above the </head> tag:

  • Desktop fix: CSS targeting .mega-menu-sidebar--content > ul > li > a > span with text-align: center !important;
  • Mobile fix: Additional media query code for screens under 768px width, using margin-inline: auto !important; on the span elements

Outcome:

The desktop solution worked successfully. The user then requested mobile alignment help, received the appropriate code, and confirmed the issue was resolved. The discussion reached full resolution with working solutions for both desktop and mobile views.

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

Screenshot 2025-02-02 222842.jpg
Screenshot 2025-02-02 222842.jpg1689Ă—864 110 KB

How do you centre the test in the mega menu?

2

Hi @GediminasS

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

1 Like
3

Hello @GediminasS ,

Could you please provide the URL/ password to your store so that I can check it and provide you with the exact solution?

4

https://e8614c-2.myshopify.com/
@DaisyVo @ZestardTech

5

Hi @GediminasS

I hope you are well. You can follow our instructions below:1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
.mega-menu-sidebar--content > ul > li > a > span {
    text-align: center !important;
}
{% endstyle %}

DaisyVo_0-1738585958769.png
DaisyVo_0-1738585958769.png1871Ă—815 186 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team

1 Like
6

Hi,

thanks for this. It did worked on PC, how do we do that on mobile as well?

7

Hi @GediminasS

DaisyVo_0-1738587218332.png
DaisyVo_0-1738587218332.png342Ă—749 71.9 KB

{% style %}
@media screen and (max-width: 768px){
.mega-menu-sidebar--content > ul.sub-menu > li > a span {
    margin-inline: auto !important;
}
}
{% endstyle %}

This is the code for mobile

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

1 Like
8

Thank you!

1 Like