I need help making my menu a hamburger menu on desktop similar to mobile , and also changing the color of the shopping bag icon and the hamburger menu icon.
my website is bloomsbylo.com pass: Blooms513!
Thank you!!
Topic summary
Goal: convert the desktop navigation to a hamburger (collapsible) menu like mobile and change the colors of the hamburger and shopping bag icons on a Shopify theme.
Key solution (CSS changes):
- Show the mobile drawer on desktop and hide the standard desktop menu using a media query (min-width: 750px). Two workable variants were provided for base.css:
- @media screen and (min-width: 750px) { .header__drawer { display: block !important; } header-menu { display: none !important; } }
- header-menu.header-menu.mobile:hidden { display: none !important; } @media screen and (min-width: 750px) { .header__drawer.desktop:hidden { display: block !important; } }
- Path: Shopify Admin > Online Store > Themes > Edit code > assets > base.css.
Icon color customization:
- Examples provided: .svg-wrapper > svg { color: red; } and .header-actions__cart-icon .svg-wrapper, .header__icon–menu .svg-wrapper { color: red; } Adjust color value as desired.
Implementation note:
- The changes also work when added via the theme’s Header “custom CSS” section if base.css edits don’t take effect; this approach was confirmed as fine.
Artifacts: Screenshots and code snippets are central to understanding the solution.
Status: Resolved with CSS-based approach; no outstanding questions.
1 Like
A person who don’t know how to put the password then how you can expect that he might gave you the solution code.
Strange!
The changes you request requires to do the custom code in your theme file.
Kindly share your store collab code in the p/m so that I can implement it.
Thanks
You are right!! are you able to inspect the site and tell me what code to enter? I know where to enter it to implement it I just can’t figure out the code
Wow your store looking amazing and attractive so have check it out
hello, why do not you use the mobile hamburger icon on desktop as well? it can look like the screenshots
That’s what I want to do… do you know how?
@bloomsbylo513 please add this css to the very end of your base.css file and check
shopify admin->online store->themes->edit theme code->assets->base.css
@media screen and (min-width: 750px) {
.header__drawer{display: block !important;}
header-menu{display: none !important;}
}
Hi @bloomsbylo513 ,
Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file
header-menu.header-menu.mobile\:hidden {
display: none !important;
}
@media screen and (min-width: 750px) {
.header__drawer.desktop\:hidden {
display: block !important;
}
}
Thank you!!! How do I also customize the color of the icons?
@bloomsbylo513 which icons?
The hamburger menu icon and the shopping bag
@bloomsbylo513 what color do you want?
add this css
.svg-wrapper>svg {
color: red;
}
.header-actions__cart-icon .svg-wrapper, .header__icon--menu .svg-wrapper {color:red;}
Thank you!!! I entered this in the custom css section for the header - because it wasnt changing anything in the base.css is that okk?
yes it should work, you can add to custom css