Hello,
Can anyone help me with the Liquid code to create a centered, responsive, horizontal menu such as in the Story Theme:
Thank you.
Topic summary
A user is seeking help implementing a centered, responsive horizontal navigation menu in their Shopify store. They’ve shared their development site (password-protected) which currently has a horizontal menu that doesn’t display well on mobile devices.
Current Issues:
- Mobile view shows menu in 2 columns instead of desired 3 columns
- Text alignment and spacing are off-center
- Menu section scrolls rather than flowing into columns
Solution in Progress:
A PageFly support representative is providing step-by-step guidance:
- Add custom CSS code to the theme.liquid file (above the tag)
- Wrap the liquid section with tags
- Apply styling code to control layout and spacing
The conversation includes multiple screenshots showing the current menu state and code placement instructions. The user is working with a liquid section for their navigation and is receiving ongoing technical support to resolve the responsive design issues.
This is Noah from PageFly - Shopify Page Builder App
Hi @Joybogen . Can you share me link url. And image menu navigation
I can help you, Thank you so much.
Best regards,
Noah | PageFly
Hi Noah,
The page is: https://sarah-dasco-photogragraphy.myshopify.com/collections/all
Password: studio
You will see I have a version of a horizontal menu but it is not great on mobile.
Thanks,
Joy
Stiletto
Thank you Noah. I did not want the section to scroll, but rather flow into three columns on mobile. Currently it goes into 2 and soacing is off. At the bottom of the page I have a liquid link list. That might work better but the text is off center and not spaced well. Please see this image:
Hello again,
First thank you so much for your help. If I am using a liquid section (see photo blow) where to I add the style code?
Joy
Hi @Joybogen you can follow image here, add 1 tag
above and 1 tag
below, save it and add code here in file theme.liquid and above tag :
Thank you.