How to make header icon responsive

Store Design
, , , ,
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

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: