Expanse theme social icons at the bottom of the menu on mobile view

Topic summary

Issue: Social icons added to the mobile menu (via {% render 'social-icons' %}) were stacking vertically; attempts to set the wrapper to display: inline-block had no effect.

Context: Helper requested a store/preview link to inspect. A preview link was shared, showing the problem in mobile view. Images illustrated the vertical layout of icons, which was central to understanding the issue.

Solution: Add code at the bottom of Layouts/theme.liquid, just above the closing tag. (The exact snippet wasn’t included in the thread extract.)

Outcome: After adding the suggested code, the icons displayed as intended (horizontally). The original poster confirmed the fix worked.

Status: Resolved. No further action items or open questions noted.

Summarized with AI on January 27. AI used: gpt-5.

Hello, I added social icons to mobile menu by adding {%- render ‘social-icons’} to the code but it only appears in a vertical line as below. I’d like to make it horizontal so tried putting ‘display: inline-block’ in its wrapper div but it didn’t change anything. Could anyone help with this please?

hayden46_2-1683012807111.png

Hi @hayden46 ,

Could you provide a link to the store which displays the issue.

Hello Kat,

As this theme is not live yet and we’re using a different them at the moment, the link won’t help :confused:

Would it help if I copy and pasted the corresponding code?

@hayden46 can you not share a preview link (without access to the code i’m afraid i wont be of much assistance).

Here’s the preview link, the problem is in the mobile view.

https://fp170l62krjtfyyg-9556000830.shopifypreview.com

@hayden46 try adding the following to the bottom of “Layouts/theme.liquid” just above the tag.


1 Like

Thank you so much Kat! This solved the issue perfectly :slightly_smiling_face: I hope you have a very nice day!