How to make header icon responsive

Store Design
, , , ,

Topic summary

Header icons render poorly at tablet-like dimensions (~876 × 1810), as shown in screenshots, with text/icons misaligned. The goal is to make the header area responsive.

Proposed fixes via Custom CSS:

  • Small screens: Use a media query to hide text and show only icons by targeting .header__icon .small-hide at max-width: 900px.
  • Wider screens (tablet/desktop): At min-width: 749px, reset .header__icon width (unset) and force key header elements to display: flex for proper alignment.

Implementation: Shopify Admin > Online Store > Theme > Customize > Theme settings > Custom CSS, then paste the provided CSS rules.

Outcome: The author confirmed the CSS changes worked. A participant requested marking the reply as the accepted solution.

Notes: Images are central to illustrating the layout issue and the affected breakpoints. The solution relies on CSS media queries to toggle text visibility and adjust layout (width and flex) for .header__icon and related header elements.

Summarized with AI on December 12. AI used: gpt-5.
1

Hey !

actually my header icon look like this :

Capture d’écran 2024-11-13 à 23.54.40.png
Capture d’écran 2024-11-13 à 23.54.40.png1022×1366 240 KB

but it’s not responsive actually it’s look like this in certain dimensions(around 876 x 1810 ) close to tablet ones:

Capture d’écran 2024-11-13 à 23.57.34.png
Capture d’écran 2024-11-13 à 23.57.34.png1784×1744 423 KB

Capture d’écran 2024-11-13 à 23.55.47.png
Capture d’écran 2024-11-13 à 23.55.47.png3456×2160 888 KB

how can i make this responsive ?

Thanks !!

2

Hi @UTOPIA-PARIS

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings. This code will hide text and display only icons on small screen.

@media (max-width: 900px) {
    .header__icon .small-hide { display: none !important; }
}
3

Hi @UTOPIA-PARIS

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (min-width: 749px){
.header__icon {
    width: unset !important;
}
.header__icons.header__icons--localization.header-localization details-modal.header__search details summary.header__icon {
    display: flex !important;
}
}

I hope this helps

Best,

Daisy

1 Like
4

hey ! thanks this work !

5

hey ! thanks ! is work !

6

Hi @UTOPIA-PARIS

If our reply was helpful, please consider giving it a Like or marking it as a Solution—it means a lot to us and keeps us motivated! :blush: