How can I center the text in my mobile menu dropdown?

Store Design

Topic summary

Centering text in a mobile menu dropdown for a store theme. A screenshot was provided to illustrate the desired alignment.

  • Solution offered: add a CSS rule at the bottom of theme.css using a mobile media query (max-width: 749px) to center mobile navigation links by setting text-align: center on the .mobile-nav__link selector.
  • Rationale: the media query targets small screens, ensuring the menu text is centered only on mobile.
  • Additional request: another participant asked for the store URL to assist further, but this became unnecessary after the fix.

Outcome: The original poster confirmed the CSS change worked. Status: Resolved; no further action indicated.

Summarized with AI on February 28. AI used: gpt-5.
1

Hello support,

Is there any way to center the text on the mobile menu drop down?

Center Text.PNG
Center Text.PNG901×545 37.4 KB

2

Hi,
Try adding this code to the bottom of theme.css

@media only screen and (max-width: 749px){
.mobile-nav__link.mobile-nav__link {
  text-align: center;
}
}
3

Hii, @UniverseofGrace
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

4

Thank you this worked!

1 Like