Messed up mobile after centering menu | Dawn Theme

Store Design

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.
1

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

hasanali1_0-1679212720760.png
hasanali1_0-1679212720760.png1176×311 69.2 KB

hasanali1_1-1679212749605.png
hasanali1_1-1679212749605.png508×307 32.6 KB

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

password - reucho

2

Hi @hasanali1

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

GemPages_0-1679213604451.png
GemPages_0-1679213604451.png1662×939 249 KB

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

GemPages_1-1679213727153.png
GemPages_1-1679213727153.png1597×949 249 KB

I hope it help for you.

Kind & Best regards,
GemPages Support Team

1 Like
3

worked!! thank you so much

4

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