Mobile menu not reflecting desktop changes

Mobile menu not reflecting desktop changes

PYZ
Shopify Partner
16 0 0

I've styled the menu + footer the way I wanted on section CSS - basically the links heading including the login and localization selector to be uppercase. The changes are reflected on desktop - but when switched to mobile, the changes are not sticking, I don't have @media set, what am I missing?

 

Additionally, how do I add a space between the account icon and the text - it looks really crowded.

 

Thanks!

 

 

Screen Shot 2025-04-01 at 11.55.37 PM.png

Screen Shot 2025-04-02 at 12.03.03 AM.png

 

Replies 4 (4)

Bundler-Manuel
Astronaut
966 49 111

Hi there @PYZ  Have you tried all this on your phone already? Do them if you haven’t and let me know if any changes are evident.

IMG_4243.jpeg

Emmanuel
Please let me know if it works by marking it as a solution!
Bundler - Product Bundles app, a great bundle app for Shopify, with glowing user testimonials and a free plan.
PYZ
Shopify Partner
16 0 0

Yep, I've been trying this on my phone and not just switching the browser view. As well as clear cache and etc. and that's the view on my phone.

successedge
Shopify Partner
7 0 1


.customer a, .header__icon--account a {
padding-left: 5px; 
}


.localization-selector, .currency-selector, .country-selector {
text-transform: uppercase;
}

.customer a.customer a, .header__icon--account a.header__icon--account a {
padding-left: 5px; 
}

.localization-selector.localization-selector,
.currency-selector.currency-selector,
.country-selector.country-selector {
text-transform: uppercase;
}


.customer a, .header__icon--account a {
padding-left: 5px !important; 
}

.localization-selector, .currency-selector, .country-selector {
text-transform: uppercase !important;
}

 

 

you can add this code by going to your  Online Store > Themes > Customize.
look for custom CSS and add that code

PYZ
Shopify Partner
16 0 0

Thanks - this is quite long and there are repeats, so I made some edits.

I added to base.css

.localization-selector{
text-transform: uppercase;
}

So it looks like I have to  add it to base.css for it work and not the section css - don't know why.

 

--

Unfortunately, your code for the spacing between the account icon and the text 'login' didn't work. Any other suggestions?