Hide cart icon and change menu in Modular

aqua_fish · ‎03-04-2024

Hi everyone, I've tried suggested solutions for these two tasks for other themes but none seem to be working for my site built with Modular theme. I have two problems I've fix:

How do hide the cart icon (on desktop and mobile screen) - I'm not selling anything yet so don't want this showing
How do I change the background of the hamburger menu icon on mobile from white to transparent and change the 3 lines to be white

Thank you in advance!

ThePrimeWeb · ‎03-04-2024

Hey @aqua_fish,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.menuToggle .diamond-bar {
    background: transparent !important;
}

.icon-menu .icon-bar, .icon-menu .icon-bar:before, .icon-menu .icon-bar:after {
    background-color: white !important;
}

a#cartTotal {
    display: none !important;
}

header-search-popdown {
    margin-right: 0 !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

I made the hamburger icon white because it's hard to see when it's black and aligned the search icon because it was too far left.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Moeed · ‎03-04-2024

Hey @aqua_fish

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral

aqua_fish · ‎03-04-2024

Sure it's gltchs.com - thanks

Moeed · ‎03-04-2024

Hey @aqua_fish

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
a#cartTotal {
    display: none !important;
}
.diamond-bar {
    background: transparent !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral

webwondersco · ‎03-04-2024

@aqua_fish Hope you are doing well.

Could you please share your store URL? so can check and guide you accordingly.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip ☕ would be greatly appreciated. :)..! Instagram

oscprofessional · ‎03-04-2024

Hello @aqua_fish.
Could you please provide me with the URL for the store you mentioned in your query? Additionally, if the store is password protected, could you share the password as well?

ThePrimeWeb · ‎03-04-2024

Hey @aqua_fish,

Please share the link to your store please? And please remember to remove any password protection on the site temporarily until we can resolve the issue. Thanks!

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

ThePrimeWeb · ‎03-04-2024

Hey @aqua_fish,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.menuToggle .diamond-bar {
    background: transparent !important;
}

.icon-menu .icon-bar, .icon-menu .icon-bar:before, .icon-menu .icon-bar:after {
    background-color: white !important;
}

a#cartTotal {
    display: none !important;
}

header-search-popdown {
    margin-right: 0 !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

I made the hamburger icon white because it's hard to see when it's black and aligned the search icon because it was too far left.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

aqua_fish · ‎03-04-2024

Amazing, this worked straight away, thank you so much, I really appreciate your help!

oscprofessional · ‎03-04-2024

Hello @aqua_fish,

Here is the code you can try. I hope it useful-

Go to the Online Store-> Theme-> Edit code-> Assets> theme.css -> Add code at the bottom.

#cartTotal {
display: none;
}
.icon-menu .icon-bar, .icon-menu .icon-bar::before, .icon-menu .icon-bar::after {
background-color: white;
}
.menuToggle .diamond-bar {
background: transparent !important;
}

Hide cart icon and change menu in Modular