Hi, I have another question: how can I make the spacing between the icons in the navigation menu on my phone smaller?
link to site: https://ddbfr9-vj.myshopify.com/ password taycle
Topic summary
A user seeks to reduce spacing between navigation menu icons on mobile devices for their Shopify store.
Problem: Icons in the mobile header have excessive padding/spacing between them.
Solutions Provided:
Three developers offered CSS-based solutions with similar approaches:
- Method 1: Add CSS to
base.cssfile targeting icons withwidth: 3.4remusing a max-width media query of 767px - Method 2: Use media query at 640px to set both height and width to 3.4rem for header icons
- Method 3: Add CSS through Theme Customizer’s Custom CSS section (749px breakpoint) targeting cart and account icons specifically
All solutions use media queries to apply changes only on mobile viewports and reduce icon dimensions to decrease spacing. Visual examples demonstrate the before/after effect. The issue remains open pending the original poster’s confirmation of which solution worked.
In order to reduce the padding between the icons of the header from the Mobile only you need to follow these steps.
Go to Shopify Admin >> Go to Online Store >> edit Code >> base.css
In the end of base.css file you need to paste the following code.
@media only screen and (max-width: 767px) {
.header__icon, .header__icon--cart .icon {
width: 3.4rem !important;
}
}
results:
Let me know if you need more help.
If this was helpful don’t forget to like it.
Thanks
Hi there,
You can use this code to reduce the space between the icons:
@media(max-width: 640px){
.header__icon{
height: 3.4rem;
width: 3.4rem;
}
}
Sinh developer, from Tipo
