Solved

Hide cart icon and change menu in Modular

aqua_fish
Not applicable
3 0 0

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:

  1. How do hide the cart icon (on desktop and mobile screen) - I'm not selling anything yet so don't want this showing
  2. 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

aqua_fish_0-1709550639582.png

Thank you in advance!

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1784 502 366

This is an accepted solution.

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.

ThePrimeWeb_1-1709553704870.jpeg

 

 

 

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.

ThePrimeWeb_2-1709553757361.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 9 (9)

Moeed
Shopify Partner
3697 932 1166

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 developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
aqua_fish
Not applicable
3 0 0

Sure it's gltchs.com - thanks

Moeed
Shopify Partner
3697 932 1166

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:

Moeed_0-1709553607926.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

webwondersco
Shopify Partner
1036 157 154

@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. 🙂

oscprofessional
Shopify Partner
15846 2371 3074

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?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

ThePrimeWeb
Shopify Partner
1784 502 366

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
ThePrimeWeb
Shopify Partner
1784 502 366

This is an accepted solution.

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.

ThePrimeWeb_1-1709553704870.jpeg

 

 

 

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.

ThePrimeWeb_2-1709553757361.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
aqua_fish
Not applicable
3 0 0

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

oscprofessional
Shopify Partner
15846 2371 3074

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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing