How can I change the hamburger menu color on scroll in a Modular theme?

[jr-rl]

Hello Everyone

I am using Modular theme and  have a transparent header that displays white logo and icon and changes to black and makes the white header appear when you scroll down. The menu on mobile though still keeps black icon with white background when the header is transparent and scrolled.

I am wanting the hamburger menu for mobile to behave the same as the cart, login, search icon and logo.

They are all white with transparent header, and when scrolled change to black against a solid white header 

Can someone please help me fix the mobile hamburger menu to behave the same

Much appreciated!

 

[infoatcodelab7 · Accepted solution]

@jr-rl 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

.menuToggle .diamond-bar{
  background-color: transparent !important;;
}

[GemPages]

Hello @jr-rl ,

It's the GemPages Support Team and we are glad to assist you today!

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

[jr-rl]

url removed

[infoatcodelab7 · Accepted solution]

@jr-rl 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

.menuToggle .diamond-bar{
  background-color: transparent !important;;
}

[jr-rl]

Thank you! that worked.

Is there a way to make it white when not scrolled and change to black once scrolled? 

Thanks!!

[infoatcodelab7 · Accepted solution]

@jr-rl 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

.icon-menu .icon-bar, .icon-menu .icon-bar::before, .icon-menu .icon-bar::after {
	background-color: #fff;
}
.header--has-scrolled .icon-menu .icon-bar, .header--has-scrolled .icon-menu .icon-bar::before, .header--has-scrolled .icon-menu .icon-bar::after {
	background-color: #000;
}

[jr-rl]

@infoatcodelab7 Hey late reply, but is there anything I can add to this code to keep the hamburger menu black when on background colour?

The logo, cart, search and login all stay black unless the background is an image (they only turn white when background = not background colour)

Can I make the hamburger menu behave the same?

[jr-rl]

Thank you so much!