How to make header icon responsive

[UTOPIA-PARIS]

Hey ! 

actually my header icon look like this : 

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

how can i make this responsive ? 

Thanks !!

[Dan-From-Ryviu · Accepted solution]

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; }
}

[UTOPIA-PARIS]

hey ! thanks ! is work !

[DaisyVo]

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

[UTOPIA-PARIS]

hey ! thanks this work ! 

[DaisyVo]

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! 😊