How can I make the announcement bar viewable on smartphones?

Store Design
, ,

Topic summary

A user seeks help displaying the announcement bar on mobile devices, specifically wanting to show social icons and language selector alongside it.

Proposed Solution:

  • Navigate to Theme Editor > Assets > base.css
  • Add CSS code to enable flexbox layout for the announcement bar
  • Include media query targeting screens up to 768px width
  • Force display of localization wrapper and social list elements on mobile using display: block !important

Technical Details:

  • Solution uses .utility-bar__grid with flexbox and space-between justification
  • Mobile-specific styles override default hidden state of social icons and language options
  • User is advised to save changes and verify the fix resolves the issue

Status: The discussion appears to provide a complete CSS-based solution, though confirmation of successful implementation is pending. Screenshots were shared showing the current desktop layout.

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

Hey @Marco211 ,

To make the announcement bar also viewable on smartphones with the social icons and language, please follow these steps:

  1. Go to the Theme Editor by navigating to Theme Editor > Assets > base.css.

  2. Once you open the file, add the following CSS code at the end of the file:

.utility-bar__grid {
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 768px){
	utility-bar .utility-bar__grid .list-social{
	    display:block !important;
	}
}
@media only screen and (max-width: 748px){
	.localization-wrapper .small-hide{
	    display:block !important;
	}
}
  1. Save the changes and check if the issue is resolved.

If you encounter any further difficulties or require additional assistance, please don’t hesitate to let me know.

If this solution resolves your issue, please consider marking it as the accepted solution.

1 Like