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

Store Design
, , , ,
1

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!

Screenshot 2023-02-14 at 12.39.42 pm.png
Screenshot 2023-02-14 at 12.39.42 pm.png218×206 36.9 KB

2

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

3

url removed

4

** @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;;
}
5

Thank you! that worked.

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

Thanks!!

6

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

Thank you so much!

8

@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?