Messed up mobile after centering menu | Dawn Theme

Topic summary

A user centered their header menu using CSS code, which worked on desktop but caused display issues on mobile devices.

Problem:

  • Menu centering code functioned correctly on desktop
  • Mobile layout became disrupted after applying the code
  • User included screenshots showing the mobile display problem

Solution:

  • A responder identified the problematic CSS code
  • Recommended removing the line display: block !important; to fix the mobile issue
  • This adjustment resolved the mobile display problem while maintaining the centered menu

Status: Resolved - the user confirmed the solution worked successfully.

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

so i used a code from here to center my header menu, and it worked great on computer

but on mobile, it got a little messed up.

not sure if i can adjust the code i have or just get a new one completely (any solution will help)

thanks in advance

website - https://the-style-luxe.myshopify.com/

password - reucho

Hi @hasanali1

I have checked. Look like you added this code to center the menu:

If true, you can remove the line code “display: block!important;” to fix issue on mobile:

I hope it help for you.

Kind & Best regards,
GemPages Support Team

1 Like

worked!! thank you so much

I am glad that my solution is helpful to you :grin: .